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图 灵 社 区 的 电子 书 没有 采用 专 有 客 
户 端 ， 您 可 以 在 任意 设备 上 ， 用 自 
己 喜 欢 的 浏览 器 和 PDF 阅读 器 进行 
阅读 。 

但 您 购买 的 电子 书 仅 供 您 个 人 使 
用 ,未 经 授权 ， 不 得 进行 传播 。 
我 们 愿意 相信 读者 具有 这 样 的 良知 
和 觉悟 ， 与 我 们 共同 保护 知识 产 
权 。 

如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 
对 该 用 户 实施 包括 但 不 限于 关闭 该 
帐号 等 维权 措施 ， 并 可 能 追究 法 律 
责任 。 


作者 简介 


Ari Lerner 
全 栈 工 程 师 ， 拥 有 多 年 AngularJS 经 验 ， 自 办 


并 运营 AngularJS 电 子 报 ng-newsletter.com， 

在 著名 硅谷 工程 师 培训 学 校 Hack Reactor 担 任 

AngularJS 讲 师 。 他 的 工作 涉及 软件 开发 的 各 
层次 ， 包 括 基础 设施 开发 、 前 端 应 用 开发 和 
能 优化 。 他 目前 住 在 旧金山 一 个 阳光 明媚 的 
方 ， 还 是 FullStack.io 创 始 人 。 


条 端 工程 师 ， 前 端 基础 技术 组 leader， 曾 经 负 
焉 豌豆 英 2.0 的 前 端 架构 设计 和 主要 开发 工作 ， 
习 前 负责 Front-end Technical Infrastructure 的 
LE 设 ， 在 工作 中 有 丰富 的 AngularJS 使 用 经 
给 。 新 浪 微 博 @ 赵 望 野 。 


2005 年 至 今 一 直 从 事 企 业 应 用 前 端 架 构 ， 对 富 
忆 特 网 应 用 有 较 深 刻 的 认识 ， 致 力 于 前 端的 高 

开发 ， 研 究 过 Backbone 和 AngularJS 的 源 
吗 ， 翻 译 过 讲解 AngularJS 基 本 原理 的 文章 ， 对 
竹 数 据 检 测 和 基于 存 取 器 两 种 监听 方式 的 差异 


有 深刻 认识 。 


可 鹏 飞 

区 名 basecss， 目 前 就 职 于 腾讯 CDC， 任 前 端 
工程 师 。 喜 欢 阅读 ， 喜 欢 前 端 技术 ， 崇 尚 开 
原 。 工 作 之 余 翻 译 过 Grunt 和 Lesscss 相 关 文 
当 ， 同 时 也 是 Lesscss 中 文 社 区 贡献 者 。 
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内 容 提要 


本 书 是 学 习 AngularS 的 公认 经 典 ， 内 容 全 面 ， 讲 解 通俗 ， 适 合 各 层次 的 学 习 者 。 作 者 拥有 丰富 的 
AngularJS 开发 和 教学 经 验 ， 也 是 一 位 全 栈 工 程 师 。 全 书 35 章 ， 由 浅 入 深 地 讲解 了 AngularJS 的 基本 概念 和 
基本 功能 ， 包 括 模块 、 作 用 域 、 控 制 器 、 表 达 式 、 指 令 、 路 由 、 依 赖 注入 等 ， 重 要 的 是 书 中 对 每 一 个 概念 
的 讲解 都 配合 了 恰如其分 的 示例 和 代码 ， 让 读者 通过 动手 实践 ， 切 身体 会 到 这 些 概 念 的 含义 和 价值 。 本 书 
后 半 部 分 深入 到 AngularJS 应 用 开发 ， 系 统 地 讨论 了 服务 器 通信 、 事 件 、 架 构 、 动 画 、 本 地 化 、 安 全 、 缓 存 、 
移动 应 用 等 主题 。 

本 书 适合 各 个 层次 的 AngularJS 开发 人 员 学 习 ， 无 论 是 出 于 工作 需要 ， 还 是 好 奇 心 的 驱使 ， 只 要 你 想 彻 
底 理 解 AngularJS， 本 书 都 会 让 你 满载 而 归 。 
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版 权 声明 


Original edition, entitled The Complete Book on AnegularJS Machines. Copyright © 2013 by Ari Lerner. 


Simplified Chinese translation copyright © 2014 by Posts & Telecom Press. 
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any 
means, electronic or mechanical, including photocopying, recording or by any information storage and 


retrieval system, without permission in writing from W. W. Norton & Company, Inc. 
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在 微 博 上 分 孚 这 本 书 


请 帮 Ari Lerner 在 新 浪 微 博 (http:/weibo.com/ ) 上 宣传 这 本 书 。 

推荐 本 书 的 微 博 : 

#mgbook# 我 刚 买 了 《AngularJS 权 威 教程 沪 我 准备 构建 高 级 、 现 代 的 Webapp! @ 图 灵 教 育 
点 击 下 面 这 个 链接 ， 在 新 浪 微 博 上 搜索 其 他 人 对 本 书 的 评价 : 
https://huati.weibo.com/k/ngbook 
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献 辣 


我 把 这 本 书 献 给 我 的 父母 ，Lisa Lerner 和 Nelson Lerner， 因 为 没有 他 们 的 支持 和 鼓励 就 不 可 
能 有 这 本 书 。 


特别 感谢 


感谢 可 爱 的 Q， 感 谢 你 一 直 以 来 的 激励 ， 以 及 你 在 编辑 方面 的 过 人 天 赋 。 感 谢 我 的 共同 创始 


人 兼 朋 友 Nate Murray。 
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译 者 厅 


2012 年 上 半年 , 我 所 在 的 公司 正在 开发 一 个 二 次 开发 平台 , 它 的 目标 是 从 数据 库 开 始 ， 能 自 
由 、 方 便 地 定制 业务 数据 、 规 则 、 流 程 、 服 务 接口 ， 还 有 展现 层 。 在 对 展现 层 的 实现 部 分 ,我 思 
考 了 很 入 ， 对 其 中 部 分 技术 细节 还 是 缺乏 好 的 思路 ,于 是 把 眼光 转 到 开源 社区 ， 无意 中 发 现 了 
AngularJS 这 样 一 个 框架 ， 详 细 考察 之 后 ， 我 认为 它 在 很 大 程度 上 满足 了 我 们 的 需求 ， 继 而 投入 
了 不 小 的 精力 进行 研究 。 


在 这 两 年 里 ,我 差不多 遍历 了 它 的 源码 ， 了 解 了 很 多 细 闻 的 实现 机 制 ， 并 且 与 当时 研究 得 较 
深 的 几 位 朋友 ， 比 如 angularjs.cn 的 作者 严 清 ， 资 深 开 发 者 王 宇 觅 等 进行 了 交流 ， 获 得 了 很 多 有 益 
的 信息 ， 与 此 同时 ， 也 跟 Avalon 的 作者 司徒 正美 有 过 一 些 讨 论 ， 对 前 端 MV* 有 了 更 深入 的 认识 。 
后 来 , 团队 中 的 大 漠 穷 秋 翻 译 的 《用 AngularJS 开 发 下 一 代 Web 应 用 》 由 电子 工业 出 版 社 出 版 。 作 
为 国内 第 一 本 关于 AngularJS 的 译 著 ， 它 带动 了 学 习 和 了 解 AngularJS 框 架 的 浪潮 ， 也 因此 与 朴 灵 
的 《深入 浅 出 Node.js》 一 起 ， 成 为 前 端 开 发 人 员 拓 展 思维 和 技能 的 两 本 最 受 欢 迎 图书 。 


到 了 2014 年 ， 我 离开 工作 9 年 的 地 方 ， 来 到 新 的 工作 环境 一 一 苏宁 云 商 ， 本 来 心里 权衡 过 ， 
很 可 能 不 再 有 使 用 AngularJS 的 业务 场景 了 ， 不 曾 想到 人 职 之 后 面 对 的 几 个 项 目 都 属于 云 产 品 ， 
正 适合 使 用 这 类 框架 ， 因 此 又 继续 了 对 它 的 深入 研究 。 


在 此 期 间 ,， 岁 灵 公 司 的 李 松 峰 老 师 发 布 了 本 书 招募 译 者 的 消息 , 我 心里 一 动 就 联系 了 他 。 经 
过 沟通 之 后 ,我 与 另外 两 名 译 者 ， 怠 豆 莱 的 @ 赵 望 野 和 腾讯 的 @basecss， 合 作 翻 译本 书 ， 每 人 负 
责 1/3 的 内 容 。 第 一 次 正式 翻译 图 书 ， 我 很 志 示 ， 翻 译 过 程 中 也 遇 到 了 一 些 困 难 。 此 前 我 虽 翻 译 
过 一 些 技术 文章 ， 其 中 一 篇 恰好 与 AngularJS 有 关 ， 但 翻译 图 书 跟 翻译 文章 的 差异 很 大 ， 有 很 多 
东西 要 考虑 一 致 性 和 连贯 性 。 


本 书 内 容 丰 富 ， 从 零 开 始 向 读者 讲述 AngularJS ， 首 先 介绍 AngularJS 的 基本 概念 ， 以 及 在 一 
些 场景 下 的 简单 应 用 。 接 着 ， 本 书 花 很 大 篇 幅 讲解 AngularJS 的 周边 体系 。 我 们 使 用 这 样 一 个 框 
架 ， 自 然 需要 对 前 端的 架构 有 一 些 考 虑 ， 包 括 代 码 的 组 织 ， 一 些 第 三 方 库 的 选择 ， 甚 至 还 有 项 目 
的 建立 、 开 发 、 测 试 、 发 布 等 各 环节 的 综合 考虑 ， 这 不 再 是 一 个 简单 的 编码 过 程 ， 而 是 一 整套 工 
程 化 的 流程 。 


另外 ,我 们 也 可 能 需要 为 这 样 一 套 前 端的 技术 栈 选择 相应 的 后 端 服务 ,比如 ,可 以 使 用 Node.js 
自己 建立 ， 或 者 是 利用 互联 网 上 已 有 的 一 些 强大 平台 ( 比如 Amazon 等 ) ， 在 这 些 平台 的 帮助 下 ， 
我 们 的 AngularJS 应 用 将 如 虎 添 玻 ， 到 达 新 的 高 度 。 

使 用 一 个 框架 却 不 去 深入 了 解 它 的 原理 ， 就 会 一 直流 于 表面 ， 当 面 对 比 较 复 杂 的 场景 时 ， 就 
找 不 到 优化 方案 。 因 此 ， 本 书 的 后 面部 分 也 深入 剖析 了 AngularJS 的 一 些 原理 和 拓展 主题 ， 比 如 
国际 化 、 移 动 开发 、 调 试 、 性 能 优化 等 。 
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无 论 是 零 基础 的 入 门 级 开发 者 ， 还 是 有 过 一 定 经 验 的 中 高 级 开发 人 员 ， 都 能 从 本 书 中 受益 。 

目前 ， 前 端 MV* 框 架 百 花 齐 放 ，AngularJS 只 是 其 中 较 流 行 的 一 种 。 这 些 框架 熟 优 熟 劣 ， 其 
实 并 无 定论 ,每 个 框架 都 会 有 它 的 适用 场景 ， 都 有 它 优秀 的 一 面 ,也 没有 哪个 框架 能 够 通 吃 所 有 
业务 场景 ， 如 果 因 为 对 一 个 框架 的 喜爱 ， 而 把 它 引 入 到 不 适合 的 产品 中 ， 一 定 是 有 害 无 益 。 

因此 ， 我 们 希望 读者 在 阅读 本 书 时 ， 能 够 多 思考 ， 愿 大 家 在 学 习 本 书 过 程 中 都 能 收获 满 满 。 
这 样 的 话 ， 作 为 本 书 译 者 的 我 们 也 将 感同身受 ,与 大 家 一 同 分 享 其 中 的 喜悦 和 满足 感 。 

在 本 书 的 出 版 过 程 中 ,除了 我 们 三 名 译 者 之 外 ， 图 灵 公 司 的 编辑 李 静 也 付出 了 很 大 的 努力 ， 
支付 宝 的 玉 伯 、51JS 版 主 宝 玉 、 百 度 的 berg 提 出 了 不 少 宝 贵 意 见 ， 对 此 ， 一 并 表示 衷心 感谢 。 
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何 鹏 飞 的 个 人 致谢 
感谢 我 所 在 的 团队 ， 给 我 提供 非常 好 的 环境 ， 让 我 能 学 习 成 长 。 


感谢 我 在 腾讯 的 导师 @TooBug， 让 我 接触 到 很 多 新 东西 ， 当 然 包括 这 本 书 所 讲述 的 
AngularJS。 在 翻译 的 过 程 中 他 也 为 我 提供 了 很 多 帮助 。 


感谢 图 灵 公 司 的 出 版 团队 ， 本 书 的 出 版 离 不 开 他 们 的 努力 和 帮助 。 
最 后 ， 还 要 感谢 没有 在 这 里 一 一 列 出 的 帮助 过 我 的 每 一 个 人 。 





赵 望 野 的 个 人 致谢 


Web 技 术 日 新 月 异 ， 每 天 早上 翻 看 各 种 技术 博客 ， 都 有 一 种 逆水 行 舟 不 进 则 退 的 危机 感 ， 而 
这 两 年 来 前 端 MV# 框 架 无 疑 是 Web 前 端 开 发 领域 最 热门 的 话题 之 一 。 之 前 已 经 读 过 本 书 英文 版 ， 
其 中 涵盖 了 AngularJS 开 发 的 全 部 细节 ， 示 例 代码 清晰 易 懂 ， 因 此 接 下 了 中 文 版 的 翻译 工作 ， 并 
迫不及待 地 推荐 给 所 有 想 学 习 AngularJS 的 朋友 。 感 谢 李 松 峰 老师 的 帮助 ， 感 谢 图 灵 出 版 团队 的 
辛勤 工作 ， 感 谢 在 翻译 本 书 过 程 中 给 予 帮助 的 所 有 朋友 。 
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似乎 每 天 都 有 新 的 JavaScript 库 或 框架 发 布 , 对 此 我 多 少 已 经 有 些 麻 木 了 。 有 能 力 从 众多 的 库 
或 框架 中 进行 筛选 是 件 好 事 , 但 至 少 在 我 看 来 ,一 个 应 用 程序 中 如 果 包 含 了 太 多 的 脚本 ,对 于 维 
护 来 说 却 是 件 坏 事 。 随 着 应 用 程序 中 脚本 数量 的 增加 ， 脚 本 间 会 产生 依赖 关系 ,所 以 我 一 直 期 待 
能 有 那么 一 到 两 个 脚本 ， 就 提供 我 需要 的 所 有 核心 功能 。 


当 我 第 一 次 听 说 AngularJS 时 ， 它 就 立刻 引起 了 我 的 注意 ， 因 为 它 只 通过 一 个 独立 的 框架 就 
可 以 构建 动态 、 交 互 密集 型 的 客户 端 应 用 。 通 过 进一步 的 研究 ， 我 确信 这 个 第 一 判断 是 正确 的 ， 
于 是 开始 迷 上 了 这 个 框架 。AngularJS 提 供 了 一 系列 健壮 的 功能 ， 以 及 将 代码 隔离 成 模块 的 方法 ， 
这 对 提高 可 复 用 性 、 可 维护 性 和 可 测试 性 都 是 非常 有 益 的 。 它 的 核心 功能 包括 DOM 操 作 、 动 夯 、 
模板 、 双 向 数据 绑 定 、 路 由 、 历 史 管 理 、Ajax 和 测试 ， 等 等 。 


基于 一 个 核心 框架 进行 开发 虽然 很 方便 ， 但 是 学 习 它 却 充满 挑战 。 一 开始 学 习 AngularJS 时 ， 
我 迷失 在 各 种 不 同 的 主题 中 , 并 很 快 变 得 有 些 诅 形 ， 甚 至 开始 怀疑 它 到 底 是 不 是 我 想 要 的 。 服 务 
是 什么 ?” 它 和 工厂 相 比 有 什么 区 别 ? 作用 域 服务 是 怎么 同 整 个 系统 融合 在 一 起 的 ?指令 是 什么 ， 
我 为 什么 要 使 用 它 ? 将 这 些 零碎 的 知识 点 拼 在 一 起 形成 大 局 观 是 我 最 初 要 克服 的 障 但。 如果 能 有 
一 些 简明 的 参考 资料 ， 对 于 降低 学 习 难度 大 有 神 益 。 

很 幸运 ， 你 已 经 有 了 这 样 一 本 优秀 的 参考 资料 ， 就 是 你 手 上 的 这 本 《AngularJS 权 威 教程 》 
它 将 帮助 你 提升 学 习 歼 率 。 本 书 作者 将 他 掌握 的 AngularJS 知 识 倾 赛 相 授 ， 并 以 非常 容易 理解 和 
学 习 的 方式 呈现 给 大 家 。 如 果 你 想 更 深入 地 了 解数 据 绑 定 、 实 时 模板 的 工作 原理 、 测 试 AngularJS 
应 用 的 流程 、 服 务 和 工厂 的 作用 以 及 作用 域 和 控制 需 如 何 协同 工作 等 知识 , 那么 这 本 书 就 是 你 所 
需要 的 。 使 用 功能 强大 的 AngularJS 进 行 开 发 是 一 件 非 常 有 趣 的 事情 ， 本 书 的 示例 将 帮助 你 快速 
掌握 这 个 框架 。 祝 你 的 AngularJS 项 目 一 切 顺 利 ! 
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天 于 本 书 


框架 ， 借 助 它 你 可 以 快捷 高 效 地 开发 富 交互 应 用 。 


你 可 以 对 它们 进行 修改 ， 从 而 构建 你 自己 的 应 用 。 


本 书包 含 了 能 让 你 成 为 AngularJS ?高 手 的 解决 方案 。AngularJS 是 由 Google 开发 的 先进 前 端 


本 书 提供 了 一 系列 前 沿 工具 ， 使 你 在 很 短 的 时 间 内 就 可 以 上 手 创 建 令 人 印象 深刻 的 Web 体 
它 能 帮助 你 解决 环 手 的 问题 ， 并 提供 了 一 些 可 以 立刻 投入 使 用 的 实用 技术 。 


本 书 涵盖 的 主题 可 以 帮助 你 构建 专业 的 Web 应 用 ， 并 能 够 非常 顺利 地 执行 。 这 些 主 题 包 括 : 


口 与 RESTful 风 格 的 Web 服 务 交 互 ; 

口 创建 可 复 用 的 自 定义 组 件 ; 

口 测试 ; 

口 异步 编程 ; 

口 创建 服务 ; 

口 提供 先进 的 视觉 效果 ; 

口 其 他 更 多 内 容 。 

本 书 的 目标 不 仅 是 让 你 深刻 了 解 AngularJS 的 运行 原理 ， 而 且 同 时 也 提供 了 专业 的 代码 片段 ， 




















借助 这 些 工具 和 测试 , 你 可 以 着 手 使 用 AngularJS 开 发 自己 的 动态 Web 应 用 了 , 并 且 确 信 你 的 




















应 用 是 可 扩展 的 。 
本 书 读者 对 象 


本 书写 给 那些 从 未 使 用 AngularJS 开 发 过 Web 应 用 , 并 且 对 如 何 开始 使 用 这 个 优秀 的 框架 心 存 





好 奇 的 读者 。 我 们 假定 读者 已 经 掌握 了 HTML 和 CSS ， 并 且 熟 悉 JavaScript ( 或 者 其 他 JavaScript 





CD http://www.hackreactor.com 
© http://angularjs.org 
(®) http://google.com 
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了 
(We 





框架 ) 的 基础 知识 。 


本 书 组 织 结构 
首先 ,本 书 涵盖 了 入 门 的 基础 知识 , 目的 是 帮助 你 很 快 上 手 使 用 AngularJS 开 发 动态 Web 应 用 。 


接 下 来 会 介绍 AngularJS 的 工作 原理 ， 以 及 它 与 其 他 流行 的 JavaScript 框 架 的 差异 。 我 们 会 深 
人 讨论 AngularJS 应 用 内 部 的 工作 流程 。 


最 后 ,我 们 将 应 用 所 学 的 知识 开发 一 个 相对 复杂 的 应 用 程序 。 
其 他 资 ; 

我 们 会 引用 AngularJS" 官 方 网 站 的 文档 。 官方 文档 是 非常 好 的 学 习 资 源 , 我 们 会 经 常用 到 它 。 
建议 你 先 看 一 下 AngularJS 的 API 文 档 , 通过 它 , 你 可 以 直接 获得 开发 AngularJS 应 用 的 推荐 方 
法 。 同 时 ， 这 个 文档 肯定 也 是 最 新 的 。 
本 书 排版 约定 

本 书 使 用 如 下 排版 规范 来 表示 不 同类 型 的 信息 。 

单行 代码 是 这 样 的 : chi>Hello</h1> 

代码 块 如 下 所 示 : 


var App = angular.module('App', []); 














省 
























































function FirstController($scope) { 
$scope.data = "Hello"; 


} 

命令 行 中 的 命令 如 下 所 示 : 

$ ls -la 

Chrome (开发 过 程 中 使 用 的 主要 浏览 器 ) 开发 者 控制 台中 的 命令 如 下 所 示 : 
> var obj = {message: "hello"]; 

新 术语 使 用 楷体 。 

重点 文字 将 会 加 粗 。 

提示 和 技巧 用 如 下 图 标 标示 : 


Q、 这 个 图 标 表 示 提示 。 


提醒 和 陷阱 用 警告 图 标 标示 : 


A 这 个 图 标 表 示警 告 。 


CD http://angularjs.org 











图 灵 社 区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 





上 
2 
ll 





错误 信息 用 如 下 图 标 标示 : 


1 、、 这 i a 
| 这 个 图 标 表 示 错 误 。 





重要 的 补充 内 容 使 用 如 下 图 标 标示 : 


| 信息 框 。 


需要 讨论 的 主题 用 如 下 图 标 标 示 : 
和 这 是 一 个 讨论 框 。 


开发 环境 


为 了 开发 AngularJS 应 用 ， 首先 和 需要 一 一 个 顺手 的 开发 环境 。 在 整个 学 习 过 程 中 ， 我 们 会 将 精 


力主 要 放 在 两 个 环境 中 : 编辑 顺和 浏览 











本 书 提 到 编辑 器 时 指 的 是 你 使 用 的 文本 编辑 器 ,而 浏览 器 就 是 你 使 用 的 浏览 器 。 强 烈 建 议 你 
下 载 Google 的 Chrome 浏 览 器 ， 因 为 它 提供 了 一 个 非常 强大 的 开发 环境 ， 可 以 使 用 开发 者 工具 。 


开始 之 前 ， 我 们 还 需要 安装 一 些 库 。 为 了 运行 测试 ， 我 们 需要 Karma 和 Node.js。 最 好 也 装 上 








git， 但 不 强求 。 








本 书 不 会 介绍 如 何 安装 NodeJS。 可 以 访问 nodejs.org "来 获得 更 多 信息 ”。 
_ 昌 然 我 们 大 部 分 工 作 都 是 在 浏览 器 中 完成 的 , 但 本 书 的 部 分 内 容 也 会 重点 介绍 如 何在 服务 器 


通过 构建 RESTful 风 格 的 API 来 服务 前 端 








CD http:/nodejs.org 
@) 读者 还 可 以 参考 图 灵 公司 的 《深入 浅 出 Nodejs》 一 书 。 一 一 编者 注 
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本 章 的 目标 是 帮助 你 熟悉 与 AngularJS 有 关 的 一 些 术语 和 技术 ， 以 及 它们 背后 相关 的 工作 原 
理 。 即 使 以 前 从 来 没有 接触 过 AngularJS， 通 过 将 零碎 的 知识 点 组 合 在 一 起 ， 你 也 可 以 构建 一 个 
属于 自己 的 AngularJS 应 用 。 


























1.1 浏览 器 如 何 获取 网 页 


我 们 把 互联 网 想象 成 一 个 邮局 : 当 你 想 给 朋友 写 信 时 ,首先 要 把 内 容 写 在 一 张 信 纸 上 ,然后 
在 信封 上 写 上 地 址 ， 再 把 信纸 装 进 信封 。 


当 你 把 信 送 到 邮局 ,邮件 分 扰 机 会 根据 邮编 和 地 址 来 判断 你 的 朋友 住 在 哪里 。 如 果 他 住 在 一 
栋 有 很 多 房间 的 公寓 大 楼 里 面 ,邮局 会 把 信件 投递 到 大 楼 的 前 台 , 然后 大 楼 的 工作 人 员 会 根据 房 
间 号 再 次 进行 分 拣 。 

互联 网 的 工作 原理 和 上 面 的 过 程 很 类 似 。 不 同 的 是 , 现实 世界 中 由 街道 连接 起 来 的 楼 房 和 公 
寅 , 在 互联 网 世界 中 被 路 由 器 和 网 线 连 接 起 来 的 计算 机 所 取代 。 每 一 台 计 算 机 都 有 一 个 唯一 的 地 
址 ， 让 网 络 可 以 定位 到 它 。 


多 个 公寓 房间 共享 同一 个 街道 地 址 , 与 此 类 似 , 多 台 计 算 机 也 可 以 共享 同一 个 网 络 或 路 由 器 。 
比如 ， 在 使 用 星巴克 提供 的 免费 Wi-Fi 时 ， 多 台 计 算 机 就 会 共享 同一 个 公 网 IP 地 址 。 尽 管 如 此 ， 
你 的 计算 机 依然 可 以 通过 路 由 器 分 配 的 内 网 人 PP 地址 被 单独 访问 到 , 路 由 器 就 好 比 公 寓 大 楼 的 工作 
人 员 ， 而 内 网 IP 地 址 就 好 比 房间 号 。 


IP 是 互联 网 协议 (Internet Protocol ) 的 缩写 。IP 地 址 是 为 每 个 接 入 到 网 络 中 的 设备 
分 配 的 数字 标识 符 。 计 算 机 、 打 印 机 甚至 手机 都 有 自己 的 IP 地 址 。 


















































目前 有 IPv4 和 IPv6 两 种 主要 的 IP 地 址 类 型 ， 普 遍 使 用 的 是 IPv4 地 址 ， 例 如 
192.168.0.199 这 种 形式 ， 而 IPV6 地 址 是 2001:0db8:0000:0000:0000:ff00:0042:8329 这 种 形 
式 的 。 


当 你 打开 一 个 浏览 器 ， 并 在 地 址 栏 输 入 http://google.com 后 ,浏览 器 会 “询问 ”网 络 (更 准确 
地 说 ， 是 “询问 ”DNS 服 务 如 ) google.com 对 应 的 卫 地 址 是 什么 ?” 如 果 DNS 服 务 器 知道 你 要 找 的 
IP 地 址 , 就 会 将 其 结果 返回 ; 如 果 不 知道 , 它 会 将 请 求 转发 给 其 他 DNS 服务 器 , 直到 在 某 一 台 DNS 
服务 器 上 找到 对 应 的 王 地 址 记录 。 在 终端 输入 下 列 指令 ， 可 以 观察 DNS 服务 器 的 响应 内 容 : 











$ dig google.com 
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如 果 你 使 用 的 是 Mac 操 作 系 统 ， 可 以 使 用 Terminal 终 端 程序 ， 它 通常 储存 在 
/Applications/Utilities 目 录 中 。 如 果 使 用 的 是 Windows 操 作 系 统 ， 打 开 开 始 菜单 ， 在 运行 
中 输入 cmd 就 可 以 打开 终端 了 。 
DNS 服务 器 返回 了 你 要 访问 的 计算 机 的 卫 地 址 (例如 找到 了 google.com 对 应 的 王 地 址 ) 后 ， 
它 就 会 向 这 个 下地 址 对 应 的 计算 机 请 求 你 要 访问 的 页 面 。 
每 一 个 路 径 对 应 的 网 页 都 由 不 同 的 HTML 文 档 组 成 (也 有 一 些 例外 )。 例 如 ， 当 浏 
览 器 请 求 http://google.com 或 http://google.com/images 时 ， 得 到 的 HTMIL 文 档 是 不 一 样 的 。 


现在 , 计算 机 已 经 知道 了 在 哪个 IP 地 址 可 以 访问 到 http://google.com， 它 会 向 Google 的 服务 右 
请 求 显示 这 个 页 面 所 需 的 HTML。 

当 远 程 服 务 器 把 HTML 文 档 发 送 回 来 后 ,浏览 器 会 对 文档 进行 泻 染 。 演 染 就 是 通过 一 系列 操 
作 ， 使 HTML 页 面 按照 设计 之 初 的 既定 方式 显示 。 


1.2 浏览 器 是 什么 
在 介绍 AngularJS 之 前 ， 我 们 需要 先 了 解 浏览 器 在 演 染 网 页 的 过 程 中 都 做 了 些 什么 。 


目前 市 场 上 有 很 多 不 同 品牌 的 浏览 器 ， 常 见 的 有 Chrome 、Safari 、Firefox 和 了 下 。 它 们 的 核心 
功能 基本 上 都 是 相同 的 : 获取 网 页 ， 并 将 它 显 示 给 用 户 。 


浏览 器 获取 页 面 对 应 的 HTML 文 本 ,将 其 解析 为 一 个 在 浏览 器 内 部 使 用 的 结构 ， 对 页 面 的 内 
容 进行 布局 ， 并 在 内 容 显示 到 屏幕 上 之 前 加 上 样式 ， 所 有 这 些 工作 都 是 在 浏览 需 内 部 进行 的 。 


作为 Web 开 发 人 员 , 我 们 的 工作 是 构造 网 页 的 结构 和 内 容 ， 这 样 浏览 器 才能 将 它们 转化 成 对 
用 户 来 说 比较 美观 的 形式 。 


使 用 AngularJS， 不 仅 可 以 构建 页 面 的 结构 ， 而 且 可 以 构建 用 户 和 Web 应 用 之 间 的 交互 。 











1.3 AngularJS 是 什么 


AngularJS 的 官方 文档 是 这 样 介绍 它 的 。 

















完全 使 用 JavaScript 编 写 的 客户 端 技 术 。 同 其 他 历史 悠久 的 Web 技 术 ( HTML、CSS 
和 JavaScript ) 配合 使 用 ,使 Web 应 用 开发 比 以 往 更 简单 、 更 快捷 。 


AngularJS 主 要 用 于 构建 单 页 面 Web 应 用 。 它 通过 增加 开发 人 员 和 常见 Web 应 用 开发 任务 之 间 
的 抽象 级 别 ， 使 构建 交互 式 的 现代 Web 应 用 变 得 更 加 简单 。 
AngularJS 的 开发 团队 将 其 描述 为 一 种 构建 动态 Web 应 用 的 结构 化 框架 。 


AngularJS 使 开发 Web 应 用 变 得 非常 简单 ,同时 也 降低 了 构建 复杂 应 用 的 难度 。 它 提供 了 开发 
者 在 现代 Web 应 用 中 经 常 要 用 到 的 一 系列 高 级 功能 ， 例 如 : 
口 解 耦 应 用 逻辑 、 数 据 模型 和 视图 ; 
口 Ajax 服务 ; 
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1.3 AngularJS 是 什么 3 


























口 依赖 注入 ; 

口 浏览 历史 ( 使 书签 和 前 进 、 后 退 按钮 能 够 像 在 普通 Web 应 用 中 一 样 工作 ); 
口 测试 ; 

口 更 多 功能 。 


1.3.1 AngularJS 有 什么 不 同 


在 其 他 JavaScript 框 架 中 ， 我 们 被 迫 从 自 定 义 的 JavaScript 对 象 中 进行 扩展 ， 并 从 外 到 内 操作 
DOM。 以 jQuery 为 例 , 为 了 在 DOM 中 插入 一 个 按钮 元 素 ， 我们 必须 知道 要 把 元 素 放 到 何 处 ,并 
在 合适 的 位 置 插入 它 : 

var btn = $("<button>Hix</button>"); 


btn.on('click', function(evt) { console.log("Clicked button"); }); 
$("#checkoutHolder").append(btn); 


尽管 这 个 过 程 并 不 复杂 ,但 是 它 要 求 开 发 者 对 整个 DOM 结 构 都 有 所 了 解 ， 并 强迫 我 们 在 
JavaScript 代 码 中 加 入 复杂 的 控制 逻辑 ， 用 以 操作 外 部 DOM。 

而 AngularJS 则 通过 原生 的 Model-View-Controller ( MVC， 模 型 -视图 -控制 器 ) 功能 增强 了 
HTML。 结 果 表 明 ， 这 个 选择 可 以 快捷 和 愉悦 地 构建 出 令 人 印象 深刻 并 且 极 富 表现 力 的 客户 端 
应 用 。 


利用 它 ， 开 发 者 可 将 页 面 的 一 部 分 封装 为 一 个 应 用 ， 并 且 不 强迫 整个 页 面 都 使 用 AngularJS 进 
行 开 发 。 这 个 特质 在 某 些 情况 下 非常 有 用 ， 比 如 你 的 工作 流程 中 已 经 包含 了 另外 一 个 框架 , 或 者 你 
只 希望 页 面 中 的 某 一 部 分 是 动态 的 ， 而 剩 下 的 部 分 是 静态 的 或 者 是 由 其 他 JavaScript 框 架 来 控制 的 。 

此 外 ，AngularJS 团 队 非 常 重视 框架 文件 压缩 后 的 大 小 ， 这 样 使 用 它 就 不 会 付出 太 多 的 额外 
代价 ( 写作 本 书 时 ,文件 压缩 后 的 体积 在 90 KB 左右 )。 这 一 特性 使 得 AngularJS 非 常 适合 用 于 开 
发 功能 原型 。 

































































1.3.2 许可 
AngularJS 的 源码 托管 在 GitHub” 上 ， 可 以 免费 获取 。 它 基于 MIT 许 可 发 布 ， 这 意味 着 你 可 以 
为 AngularJS 贡 献 代 码 ， 使 其 变 得 更 加 优秀 。 


为 了 促进 大 家 为 AngularJS 贡 献 代码 ， 开 发 团队 把 开发 流程 变 得 相对 开放 。 任 何 重大 变化 都 
需要 在 AngularJS 的 邮件 列表 上 ”进行 讨论 ， 所 有 人 都 可 以 加 入 讨论 ， 这样 一 来 大 家 就 可 以 对 潜在 
的 变动 进行 改进 ， 并 且 防 止 重复 劳动 。 

关于 贡献 代码 的 更 多 内 容 可 以 在 AngularJS 的 官网 中 查看 “贡献 代码 ”部 分 "。 




















GD http://jquery.com/ 

© http://github.com 

@) https://groups.google.com/forum/?hl=en#!forum/angular 
(@ http://docs.angularjs.org/misc/contribute 
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数据 绑 定 和 第 一 个 
AngularJS Web 应 用 








Hello World 

写 一 个 Hello World 应 用 是 开始 学 习 AngularJS 的 最 基本 途径 ,让 我 们 从 一 段 简单 得 不 能 再 简单 
的 HTML 开 始 吧 。 

随 着 学 习 的 深入 , 我 们 会 逐渐 深入 到 AngularJS 的 内 部 原理 中 。 现在 , 让 我 们 先 来 写 一 个 Hello 
World 应 用 。 




















《!DOCTYPE html> 
<html ng-app> 
<head> 
<title>Simple app</title> 
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"> 
</script> 
</head> 
<body> 
<input ng-model="name” type="text" placeholder="Your name"> 
<hi>Hello {{ name }}</h1> 
</body> 
</html> 


ann Smpleapp 


Hello world 


图 2-1 Hello World 








虽然 这 个 例子 不 怎么 有 趣 ， 但 它 展 示 了 AngularJS 最 基本 也 最 令 人 印象 深刻 的 功能 之 一 : 数 
据 绑 定 。 
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| 请 注意 ， 在 本 章 的 示例 代码 中 为 了 方便 展示 第 一 个 核心 概念 ， 我 们 并 没有 用 最 
佳 方式 编写 控制 器 。 这 也 是 本 书 唯一 一 处 我 们 不 鼓励 将 示例 代码 应 用 在 实际 生 
产 中 ， 而 只 作为 学 习 范 例 的 地 方 。 


2.1 AngularJS 中 的 数据 绑 定 


在 Rails 等 传统 Web 框 架 中 , 控制 器 将 多 个 模型 中 的 数据 和 模板 组 合 在 一 起 形成 视图 ,并 将 其 
提供 给 用 户 , 这 个 组 合 过 程 会 产生 一 个 单 向 视图 。 如 果 没 有 创建 任何 自 定 义 的 JavaScript 组 件 , 视 
图 只 会 体现 它 泻 染 时 模型 暴露 出 的 数据 。 在 写 这 篇 文章 时 , 已 经 出 现 了 好 几 个 可 以 在 视图 和 模型 
之 间 自 动 进行 数据 绑 定 的 框架 。 

AngularJS 则 采用 了 完全 不 同 的 解决 方案 。 它 创建 实时 模板 来 代替 视图 ， 而 不 是 将 数据 合并 
进 模 板 之 后 更 新 DOM。 任 何 一 个 独立 视图 组 件 中 的 值 都 是 动态 替换 的 。 这 个 功能 可 以 说 是 
AngularJS 中 最 重要 的 功能 之 一 ， 也 是 让 我 们 只 用 10 行 代码 ， 并 且 在 没有 任何 JavaScirpt 的 情况 下 
就 可 以 写 出 Hello World 的 关键 。 


要 实现 这 个 功能 ， 只 要 在 HTML 页 面 中 引用 angular. js ， 并 在 某 个 DOM 元 素 上 明确 设置 
ng-app 属 性 即 可 。ng-app 属 性 声明 所 有 被 其 包含 的 内 容 都 属于 这 个 AngularJS 应 用 ， 这 也 是 我 们 
可 以 在 Web 应 用 中 般 套 AngularJS 应 用 的 原因 。 只 有 被 具有 ng-app 属 性 的 DOM 元 素 包 含 的 元 素 才 


会 受 AngularJS 影 响 。 




































































Q、 视图 中 的 插值 会 在 计算 一 个 或 多 个 变量 时 被 动态 痊 换 ， 替 换 结 果 是 字符 串 中 的 
插值 被 变量 的 值 替代 。 


Q、 例如 ， 如 果 有 一 个 叫做 name 的 变量 ， 它 的 值 是 “Ari”， 那 么 视图 中 的 "Hello 
{{ name }}" 字 符 囊 会 被 蔡 换 成 “Hello Ari”。 





自动 数据 绑 定 使 我 们 可 以 将 视图 理解 为 模型 状态 的 映射 。 当 客户 端的 数据 模型 发 后 变 化 时 ， 
视图 就 能 反映 出 这 些 变化 ， 并 且 不 需要 写 任何 自 定 义 的 代码 ， 它 就 可 以 工作 。 

在 MVC ( Model View Controller， 模 型 -视图 -控制 句 ) 的 世界 里 ， 控 制 器 可 以 不 必 担 心 会 牵 
扯 到 泻 染 视 图 的 工作 。 这 样 我 们 就 不 必 再 担心 如 何 分 离 视图 和 控制 需 逻 辑 , 并 且 也 可 以 使 测试 变 
得 既 简 单 又 令 人 愉悦 。 




















MVC 是 一 种 软件 架构 设计 模式 ， 它 将 表现 从 用 户 交 互 中 分 离 出 来 。 通 常 来 讲 ， 
模型 中 包含 应 用 的 数据 和 与 数据 进行 交互 的 方法 ， 视 图 将 数据 呈献 给 用 户 ， 而 
控制 器 则 是 二 者 之 间 的 桥梁 。 


Q、 这 种 表现 分 离 " 能 将 应 用 中 的 对 象 很 好 地 隔离 开 来 ,因此 视图 不 需要 知道 如 何 保 

存 对 象 ， 只 要 知道 如 何 显示 它 即 可 。 这 也 意味 着 数据 模型 不 需要 同 视 图 进行 交 
互 ， 只 需要 包含 数据 和 操作 视图 的 方法 。 控 制 器 用 来 存放 将 二 者 绑 定 在 一 起 的 
业务 逻辑 。 





人 http://martinfowler.com/eaaDev/uiArchs.html 
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AngularJS 会 记录 数据 模型 所 包含 的 数据 在 任何 特定 时 间 点 的 值 ( 在 Hello World 例 子 中 就 是 
name 的 值 )， 而 不 是 原始 值 。 

当 AngularJS 认 为 某 个 值 可 能 发 生变 化 时 ， 它 会 运行 自己 的 事件 循环 来 检查 这 个 值 是 否 变 
“ 脏 ”"。 如 果 该 值 从 上 次 事件 循环 运行 之 后 发 生 了 变化 ， 则 该 值 被 认为 是 “ 脏 ” 值 。 这 也 是 Angular 
可 以 跟踪 和 响应 应 用 变化 的 方式 。 





























这 个 事件 循环 会 调用 $digest( ) 循 环 ， 第 23 章 将 会 详细 介绍 。 

这 个 过 程 被 称 作 脏 检查 ( dirty checking )。 脏 检查 是 检查 数据 模型 变化 的 有 效 手 段 。 当 有 洪 

在 的 变化 存在 时 ，AngularJS 会 在 事件 循环 时 执行 脏 检 查 ( 第 24 章 会 深入 讨论 ) 来 保证 数据 的 一 
致 性 。 

















如 果 使 用 KnockoutJS 这 种 通过 在 数据 模型 上 绑 定 事件 监听 器 来 监听 数据 变化 的 框架 ， 这 个 
过 程 会 变 得 更 复杂 且 低 效 ”。 处 理事 件 合并 、 依 赖 跟踪 和 大 量 的 事件 触发 (event firing ) 是 非常 复 


杂 的 ， 而 且 会 在 性 能 方面 导致 额外 的 问题 。 





尽管 存在 更 高 效 的 方式 ， 但 脏 检查 可 以 运行 在 所 有 浏览 器 中 并 且 是 可 预测 的 。 
此 外 ， 很 多 在 速度 和 效率 方面 有 要 求 的 软件 都 会 使 用 脏 检 查 的 方案 ?。 





借助 AngularJS， 不 需要 构建 复杂 和 新 的 JavaScript 功 能 ， 就 可 以 在 视图 中 实现 类 自动 同步 的 
机 制 。 


为 了 表示 内 部 和 内 置 的 库 函 数 ,Angular 使 用 $ 预 定义 对 象 . 尽 管 这 类 似 于 全 局 的 jQuery 
对 象 $， 但 它们 是 完全 无 关 的 。 只 要 遇 到 $ 符 号 ， 你 都 可 以 只 把 它 看 作 一 个 Angular 对 象 。 
2.2 简单 的 数据 绑 定 


审阅 一 下 上 面 写 的 代码 ， 我 们 使 用 ng-model 指 令 将 内 部 数据 模型 对 象 ($scope ) 中 的 name 
属性 绑 定 到 了 文本 输入 字段 上 。 


这 意味 着 无 论 在 文本 输入 字段 中 输入 了 什么 ， 都 会 同步 到 数据 模型 中 。 





数据 模型 对 象 (model object ) 是 指 $scope 对 象 。$scope 对 象 是 一 个 简单 的 
JavaScript 对 象 ， 其 中 的 属性 可 以 被 视图 访问 ， 也 可 以 同 控制 器 进行 交互 。 如 果 
不 理解 这 个 概念 也 没有 关系 ， 后 面 的 例子 将 会 对 这 个 概念 进行 详细 说 明 。 

双向 数据 绑 定 (bi-directional ) 意味 着 如 果 视 图 改变 了 某 个 值 ， 数 据 模 型 会 通过 
脏 检 查 观 察 到 这 个 变化 ， 而 如 果 数 据 模型 改变 了 某 个 值 ， 视 图 也 会 依据 变化 重 


新 泻 染 。 


在 输入 字段 上 使 用 ng-model 指 令 来 实现 数据 绑 定 ， 如 下 所 示 : 





GD http://angularjs.org 
@ 这 有 些 言 过 其 实 ， 低 效 是 真 ， 复 杂 未 必 。 一 一 译 者 注 
@) 比如 在 游戏 开发 中 就 大 量 使 用 脏 检查 技术 。 一 一 译 者 注 
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<input ng-model="person.name" type="text" placeholder="Yourname"> 
<hi>Hello{{ person.name }}</h1> 


这 样 绑 定 就 设置 好 了 【( 没 错 ， 就 是 这 么 简单 )。 我 们 可 以 观察 一 下 视图 是 如 何 更 新 数据 模型 
的 。 当 输入 字段 中 的 值 发 生变 化 时 ，person .name 会 被 更 新 ， 而 视图 将 反映 出 这 个 更 新 。 

我 们 仅 通 过 视图 就 实现 了 一 个 双向 数据 绑 定 。 为 了 从 其 他 角度 (后 端 到 前 端 ) 解释 双向 数据 
绑 定 ， 后 面 会 深入 介绍 控制 器 。 

正如 ng-app 声 明 所 有 被 它 包 含 的 元 素 都 属于 AngularJS 应 用 一 样 ，DOM 元 素 上 的 
ng-controller 声 明 所 有 被 它 包 含 的 元 素 都 属于 某 个 控制 器 。 

为 了 解释 这 个 概念 ， 我 们 将 前 面 的 例子 修改 成 如 下 的 样子 : 


























<div ng-controller='MyController'> 
<input ng-model="person.name" type="text" placeholder="Your name"> 
<hi>Hello {{ person.name }}</h1> 

/divy 


在 这 个 例子 中 , 我 们 会 创建 一 个 每 秒 钟 走 一 步 的 时 钟 (时 钟 通常 都 是 这 样 的 ), 并 更 新 clock 
变量 上 的 数据 : 


function MyController($scope, $timeout) { 
var updateClock = function() { 
$scope.clock = new Date(); 
$timeout(function() { 
updateClock( ); 
},，106060); 
把 
updateClock( ) ; 
}; 


在 这 个 例子 中 ，MyController 函 数 接受 两 个 参数 ， 即 该 DOM 元 素 的 $scope 和 
$timeout。 第 13 章 将 介绍 如 何 使 用 不 同 的 变量 定义 函数 。 





在 这 个 例子 中 ， 当 定时 器 触发 时 会 调用 updateClock( ) 函数 , 将 $scope.clock 的 值 设 置 为 当 
前 时 间 。 

口 $timeout 对 象 

可 以 在 视图 中 将 clock 变 量 用 {{ }} 包 起 来 ， 以 显示 $scope 中 的 clock 的 值 : 





<div ng-controller="MyController"> 
<h5>{{ clock }}</h5> 
</div> 


下 面 是 完整 的 示例 代码 : 





ldoctype html> 
<html ng-app> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script> 
</head> 
<body> 
<div ng-controller="MyController"> 
<hi>Hello {{ clock }}!</hi> 
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</div> 
<ScTript type="text/javascript"> 
function MyController($scope, $timeout) { 
var updateClock = function() { 
$scope.clock = new Date(); 
$timeout(function() { 
updateClock(); 
}，1000 ) 
I 
updateClock( ); 
}; 
</script> 
</body> 
</html> 


联 在 线 示例 : http://jsbin.com/uHiVOZo/1/edit?html,output。 


尽管 我 们 可 以 将 所 有 代码 都 写 在 一 个 文件 中 ， 但 由 于 需要 将 不 同 的 组 件 分 开 开 
发 ， 将 代码 写 在 一 个 文件 中 会 使 协同 工作 变 得 非常 困难 。 通 常情 况 下 ， 更 好 的 
选择 是 将 JavaScript 放 在 单独 的 文件 中 ， 而 不 是 index.html 中 。 


上 面 的 代码 可 以 修改 成 : 


<¢!ldoctype html> 
<html ng-app> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">¢/script> 
“</head> 
<body> 
<div ng-controller="MyController"> 
<hi>Hello {{ clock }}!</h1> 


</div> 
<script type="text/javascript" src="js/app.js">»</script> 
</body> 
</html> 
将 前 面 例子 中 的 JavaScript 代 码 放 在 js/app.js 文 件 中 ， 而 不 是 将 它 直 接 写 在 HTML 中 。 
// 在 app.js 中 


function MyController($scope, $timeout) { 
var updateClock = function() { 
$scope.clock = new Date(); 
$timeout(function() { 
updateClock(); 
}，1000 ) ; 
} 
updateClock(); 
}; 


2.3 数据 绑 定 的 最 佳 实践 


由 于 JavaScript 自 身 的 特点 ,以 及 它 在 传递 值 和 引用 时 的 不 同 处 理 方式 , 通常 认为 , 在 视图 中 
曾 过 对 象 的 属性 而 非 对 象 本 身 来 进行 引用 绑 定 ， 是 Angular 中 的 最 佳 实践 。 






































同 
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如 果 把 这 个 最 佳 实践 应 用 到 上 面 时 钟 的 例子 中 ， 需 要 把 视图 中 的 代码 改写 成 下 面 这 样 : 


¢ldoctype html> 


<html ng-appy> 
<head> 一 
《Script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script> 
</head> 
<body> 
<div ng-controller="MyController"> 
<hi>Hello {{ clock.now }}!</hi> 
</div> 
<ScTipt type="text/javascript" src="js/app.js"></script> 
《</body> 
</html> 


在 这 个 例子 中 ， 相 比 每 秒 钟 都 更 新 $scope .clock ， 更 新 clock .now 的 值 会 是 更 好 的 选择 。 有 
了 这 个 优化 后 ， 我 们 将 反映 数据 变化 的 逻辑 做 如 下 修改 : 

// 在 app.js 中 

function MyController($scope) { 


$scope.clock = { 
now: new Date() 





} 

var updateClock = function() { 
$scope.clock.now = new Date() 

}; 

setInterval(function() { 
$scope. $apply(updateClock ) ; 

}，1000 ) 

updateClock( ); 

后 


Q、 将 所 有 绑 定 都 通过 这 样 的 形式 放 在 视图 中 ， 是 个 非常 好 的 主意 。 


nl 

ey 
光 
ba] 
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模 块 








在 JavaScript 中 , 将 函数 代码 全 部 都 定义 在 全 局 命名 空间 中 绝对 不 是 什么 好 主意 , 这 样 做 会 导 
致 冲突 从 而 使 调试 变 得 非常 困难 ， 浪 费 宝贵 的 开发 时 间 。 
上 一 章 介绍 数据 绑 定 时 ， 我 们 把 控制 器 的 代码 写 到 了 一 个 在 全 局 命名 空间 中 定义 的 函数 里 : 
function MyController($scope) { 
var updateClock = function() { 


$scope.clock = new Date(); 


}; 

setInterval(function() { 
$scope. $apply(updateClock); 

}, 10600); 

updateClock(); 


本 章 将 讨论 如 何 写 出 高 效 、 能 用 在 生产 环境 中 的 控制 侨 代 码 , 并 把 它 封 装 在 一 个 我 们 称 之 为 
模块 (module ) 的 单元 内 。 

在 AngularJS 中 ， 模 块 是 定义 应 用 的 最 主要 方式 。 模 块 包含 了 主要 的 应 用 代码 。 一 个 应 用 可 
以 包含 多 个 模块 ， 每 一 个 模块 都 包含 了 定义 具体 功能 的 代码 。 

使 用 模块 能 给 我 们 带 来 许多 好 处 ， 比 如 ; 
口 保持 全 局 命名 空间 的 清洁 ; 
口 编写 测试 代码 更 容易 ， 并 能 保持 其 清洁 ， 以 便 更 容易 找到 互相 隔离 的 功能 ; 
口 易于 在 不 同 应 用 间 复 用 代码 ; 
口 使 应 用 能 够 以 任意 顺序 加 载 代码 的 各 个 部 分 。 
AngularJS 人 允许 我 们 使 用 angular .module( ) 方 法 来 声明 模块 ， 这 个 方法 能 够 接受 两 个 参数 ， 
是 模块 的 名 称 ， 第 二 个 是 依赖 列表 ， 也 就 是 可 以 被 注入 到 模块 中 的 对 象 列表 。 














A 


于 一 





> 


angular .module( 'myApp', []); 
OG 这 个 方法 相当 于 AngularJS 模 块 的 setter 方 法 ， 是 用 来 定义 模块 的 。 


调用 这 个 方法 时 如 果 只 传递 一 个 参数 ， 就 可 以 用 它 来 引用 模块 。 例 如 ,可 以 通过 以 下 代码 来 
引用 myApp 模 块 : 


// 这 个 方法 用 于 获取 应 用 
angular.module('myApp ' ) 
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| 这 个 方法 相当 于 AngularJS 模 块 的 getter 方 法 ， 用 来 获取 对 模块 的 引用 。 





接 下 来 ， 就 可 以 在 angular .module('myApp' ) 返 回 的 对 象 上 创建 我 们 的 应 用 了 。 


开发 大 型 应 用 时 ， 我 们 会 创建 多 个 模块 来 承载 业务 逻辑 。 将 复杂 的 功能 分 割 成 不 同 的 模块 ， 
有 助 于 单独 为 它们 编写 测试 ， 相 关 信 息 参 见 第 21 章 。 











3.1 参数 
下 面 是 angular.module( ) 的 参数 列表 。 





3.1.1 name (字符 串 ) 
name 是 模块 的 名 称 ， 字 符 串 变量 。 


3.1.2 requires 〈 字 符 串 数组 ) 


requires 包 含 了 一 个 字符 串 变 量 组 成 的 列表 , 每 个 元 素 都 是 一 个 模块 名 称 , 本 模块 依赖 于 这 
些 模块 ， 依 赖 需要 在 本 模块 加 载 之 前 由 注入 需 进 行 预 加 载 。 
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作用 域 








作用 域 (scope ) "是 构成 AngularJS 应 用 的 核心 基础 ， 在 整个 框架 中 都 被 广泛 使 用 ， 因 此 了 解 
它 如 何 工 作 是 非常 重要 的 。 

应 用 的 作用 域 是 和 应 用 的 数据 模型 相关 联 的 , 同时 作用 域 也 是 表达 式 执 行 的 上 下 文 。$scope 
对 象 是 定义 应 用 业务 逻辑 、 控 制 右 方法 和 视图 属性 的 地 方 。 

作用 域 是 视图 和 控制 右 之 间 的 胶水 。 在 应 用 将 视图 演 染 并 呈献 给 用 户 之 前 , 视图 中 的 模板 会 
和 作用 域 进 行 连接 ， 然 后 应 用 会 对 DOM 进 行 设置 以 便 将 属性 变化 通知 给 AngularJS。 这 个 功能 让 
XHR 请 求 等 promise 对 象 的 实现 变 得 非常 容易 。 查 看 第 17 章 获取 更 多 关于 promise 对 象 的 内 容 。 

作用 域 是 应 用 状态 的 基础 ,基于 动态 绑 定 ,我 们 可 以 依赖 视图 在 修改 数据 时 立刻 更 新 $scope， 
也 可 以 依赖 $scope 在 其 发 生变 化 时 立刻 重新 泻 染 视图 。 

AngularJS 将 $scope 设 计 成 和 DOM 类 似 的 结构 ， 因 此 $scope 可 以 进行 扔 套 ， 也 就 是 说 我 们 可 
以 引用 父 级 $scope 中 的 属性 。 






































如 果 你 了 解 JavaScript， 对 这 个 分 层 的 概念 应 该 并 不 陌生 。 在 JavaScript 中 ， 当 创建 
一 个 新 的 执行 上 下 文 时 ， 实 际 上 是 用 函数 创建 了 一 个 新 的 本 地 上 下 文 。AngularJS 中 
$scope 的 概念 与 其 类 似 ， 当 为 子 DOM 元 素 创建 新 的 作用 域 时 ， 实 际 上 是 为 子 DOM 元 素 
创建 了 一 个 新 的 执行 上 下 文 。 
作用 域 提供 了 监视 数据 模型 变化 的 能 力 。 它 允许 开发 者 使 用 其 中 的 apply 机 制 ， 将 数据 模型 
的 变化 在 整个 应 用 范围 内 进行 通知 。 我 们 在 作用 域 的 上 下 文中 定义 和 执行 表达 式 , 同时 它 也 是 将 
事件 通知 给 另 一 个 控制 器 和 应 用 其 他 部 分 的 中 介 。 


将 应 用 的 业务 逻辑 都 放 在 控制 器 中 ,而 将 相关 的 数据 都 放 在 控制 锅 的 作用 域 中 , 这 是 非常 完 
美的 架构 。 




















4.1 视图 和 $scope 的 世 珊 


AngularJS 启 动 并 生成 视图 时 ， 会 将 根 ng-app 元 素 同 $rootScope 进 行 绑 定 。$rootScope 是 所 
有 $scope 对 象 的 最 上 层 。 

















Q@ 如 非特 别 强调 ， 本 书 中 的 作用 域 均 指 AngularJS 中 的 作用 域 对 象 ， 而 不 是 JavaScript 作 用 域 。 一 一 译 者 注 
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$rootScope 是 AngularJS 中 最 接近 全 局 作用 域 的 对 象 。 在 $rootScope 上 附加 太 多 业 
务 罗 并 不 是 好 主意 ， 这 与 污染 JavaScript 的 全 局 作用 域 是 一 样 的 。 


$scope 对 象 就 是 一 个 普通 的 JavaScript 对 象 ， 我 们 可 以 在 其 上 随意 修改 或 添加 属性 。 


$scope 对 象 在 AngularJS 中 充当 数据 模型 ， 但 与 传统 的 数据 模型 不 一 样 ，$scope 并 不 负责 处 
理 和 操作 数据 ， 它 只 是 视图 和 HTML 之 间 的 桥 染 ， 它 是 视图 和 控制 锅 之 间 的 胶水 。 






































$scope 的 所 有 属性 ， 都 可 以 自动 被 视图 访问 到 。 假 设 我 们 有 如 下 的 HTML: 


《<div ng-app="myApp"> 
<hi>Hello {{ name }}</h1> 
«</div> 











我 们 希望 {{ name }} 变 量 是 本 地 $scope 的 一 个 属性 ， 效 果 如 图 4-1 所 示 。 


angular .module( 'myApp', []) 
.run(function($rootScope) { 
$rootScope.name = "World"; 


上 7 


Snpleapp 


Hello World 


图 4-1 简单 的 $rootScope 绑 定 


4.2 就 是 HTML 而 已 


我 们 的 应 用 负责 泻 染 HTML 并 将 它 交 给 浏览 器 来 显示 。 这 个 HIML 中 包含 了 各 种 标准 的 
HTML 元 素 ， 包 括 AngularJS 特 有 的 以 及 非 AngularJS 特 有 的 元 素 。AngularJS 不 会 对 不 包含 
AngularJS 特 殊 声明 的 元 素 进行 任何 处 理 。 





<h2>Hello world</h2> 
<h3>Hello {{ name }}</h3> 





上 面 这 个 例子 中 ，AngularJS 不 会 处 理 ch2> 元素 , 但 是 会 在 作用 域 发 生变 化 时 更 新 ch3> 元 素 。 
我 们 可 以 在 AngularJS 应 用 的 模板 中 使 用 多 种 标记 ， 包 括 下 面 这 些 。 

口 指令 : 将 DOM 元 素 增 强 为 可 复 用 的 DOM 组 件 的 属性 或 元 素 。 

口 值 绑 定 : 模板 语法 {{ }} 可 以 将 表达 式 绑 定 到 视图 上 。 

口 过 滤器 : 可 以 在 视图 中 使 用 的 函数 ， 用 来 进行 格式 化 。 

口 表单 控件 : 用 来 检验 用 户 输 入 的 控件 。 
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4.3 ”作用 域 能 做 什么 


作用 域 有 以 下 的 基本 功能 : 

口 提供 观察 者 以 监视 数据 模型 的 变化 ; 

口 可 以 将 数据 模型 的 变化 通知 给 整个 应 用 ， 甚 至 是 系统 外 的 组 件 ; 

口 可 以 进行 钥 套 ， 隔 离 业 务 功能 和 数据 ; 

口 给 表达 式 提供 运算 时 所 需 的 执行 环境 。 

开发 AngularJS 应 用 的 大 部 分 工作 内 容 ， 就 是 构建 作用 域 及 其 相关 的 功能 。 

































































作用 域 包含 了 泻 染 视图 时 所 需 的 功能 和 数据 , 它 是 所 有 视图 的 唯一 源头 。 可 以 将 作 
用 域 理解 成 视图 模型 (view model )。 


前 面 的 例子 中 ， 我 们 在 $rootScope 中 设置 了 一 个 name 变 量 并 在 视图 中 引用 了 它 : 





angular.module( 'myApp', []) 
.run(function($rootScope) { 
$rootScope.name = "World"; 


}); 
在 视图 中 可 以 引用 这 个 name 属 性 并 将 它 展示 给 用 户 : 








<div ng-app="myApp"> 
<hi>Hello {{ name }}</h1> 
</div> 
我 们 可 以 不 将 变量 设置 在 $rootscope 上 , 而 是 用 控制 右 显 式 创建 一 个 隔离 的 子 $scope 对 象 ， 
把 它 设置 到 这 个 子 对 象 上 。 使 用 ng-controller 指 令 可 以 将 一 个 控制 器 对 象 附 加 到 DOM 元 素 上 ， 
如 下 所 示 : 




















<div ng-app="myApp"> 
<div ng-controller="MyController"> 
<hi>Hello {{ name }}</h1> 
《</div> 
</div> 


我 们 可 以 创建 一 个 控制 器 来 管理 与 其 相关 的 变量 ， 而 不 用 将 name 变 量 直 接 放 在 $rootScope 上 : 


angular.module("myApp"，[) 

.Controller('MyController '， 

function($scope) { 
$scope.name = "Ari"; 


]) 
ng-controller 指 令 为 这 个 DOM 元 素 创 建 了 一 个 新 的 $scope 对 象 ， 并 将 它 散 套 在 $rootScope 中 。 











4.4 $scope 的 生命 周期 


当 Angular 关 心 的 事件 发 生 在 浏览 器 中 时 ， 比 如 用 户 在 通过 ng-model 属 性 监控 的 输入 字段 中 
输入 ,或 者 带 有 ng-click 属 性 的 按钮 被 点 击 时 ，Angular 的 事件 循环 都 会 启动 。 这 个 事件 将 在 
Angular 执 行 上 下 文中 处 理 。 
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更 多 关于 Angular 执 行 上 下 文 的 信息 请 参考 第 23 章 。 


每 当 事 件 被 处 理 时 ，$scope 就 会 对 定义 的 表达 式 求 值 。 此 时 事件 循环 会 启动 ， 并 且 Angular 
应 用 会 监控 应 用 程序 内 的 所 有 对 象 ， 脏 值 检测 循环 也 会 运行 。 








第 6 章 将 深入 讨论 表达 式 。 作 用 域 的 表达 式 就 是 赋值 给 作用 域 对 象 的 变量 。 当 我 
们 给 上 面 提 到 的 作用 域 中 的 name 变 量 赋值 ， 比 如 $scope.name="Ari"， 实 际 上 
是 设置 了 一 个 表达 式 ， 即 使 这 个 值 只 是 一 个 简单 的 字符 囊 。 


$scope 对 象 的 生命 周期 处 理 有 四 个 不 同 阶段 。 


4.4.1 创建 


在 创建 控制 器 或 指令 时 ，AngularJS 会 用 $injector 创 建 一 个 新 的 作用 域 , 并 在 这 个 新 建 的 控 
制 器 或 指令 运行 时 将 作用 域 传 递 进去 。 








4.4.2 ”链接 

当 Angular 开 始 运行 时 ， 所 有 的 $scope 对 象 都 会 附加 或 者 链接 到 视图 中 。 所 有 创建 $scope 对 
象 的 函数 也 会 将 自身 附加 到 视图 中 。 这 些 作 用 域 将 会 注册 当 Angular 应 用 上 下 文中 发 生变 化 时 需 
要 运行 的 函数 。 





这 些 函 数 被 称 为 $watch 函 数 ，Angular 通 过 这 些 函 数 获知 何 时 启动 事件 循环 。 


4.4.3 更 新 

当 事 件 循环 运行 时 ， 它 通常 执行 在 顶层 $scope 对 象 上 (被 称 作 $rootScope )， 每 个 子 作 用 域 
都 执行 自己 的 脏 值 检测 。 每 个 监控 函数 都 会 检查 变化 。 如 果 检 测 到 任意 变化 , $scope 对 象 就 会 触 
发 指定 的 回调 函数 。 





4.4.4 ”销毁 
当 一 个 $scope 在 视图 中 不 再 需要 时 ， 这 个 作用 域 将 会 清理 和 销毁 自己 。 


尽管 永远 不 会 需要 清理 作用 域 ( 因为 Angular 会 为 你 处 理 )， 但 是 知道 是 谁 创建 了 这 个 作用 域 
还 是 有 用 的 ， 因 为 你 可 以 使 用 这 个 $scope 上 叫做 $destory( ) 的 方法 来 清理 这 个 作用 域 。 









































4.5 指令 和 作用 域 


指令 在 AngularJS 中 被 广泛 使 用 ， 指 令 通 常 不 会 创建 自己 的 $scope ， 但 也 有 例外 。 比 如 
ng-controller 和 ng-repeat 指 令 会 创建 自己 的 子 作用 域 并 将 它们 附加 到 DOM 元 素 上 。 


在 介绍 更 多 内 容 之 前 ， 我 们 先 来 看 看 控制 器 是 什么 ， 以 及 如 何在 应 用 中 使 用 它们 。 
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第 5 章 
控制 比 








控制 器 在 AngularJS 中 的 作用 是 增强 视图 。 在 Hello World 的 例子 中 , 我 们 并 没有 使 用 普通 的 控 
制 器 ， 而 是 使 用 了 一 个 隐 式 控制 需 。 

AngularJS 中 的 控制 器 是 一 个 函数 ， 用 来 向 视图 的 作用 域 中 添加 额外 的 功能 。 我 们 用 它 来 给 
作用 域 对 象 设置 初始 状态 ， 并 添加 自 定 义 行 为 。 

当 我 们 在 页 面 上 创建 一 个 新 的 控制 器 时 ，AngularJS 会 生成 并 传递 一 个 新 的 $scope 给 这 个 控 
制 器 。 可 以 在 这 个 控制 锅 里 初始 化 $scope。 由 于 AngularJS 会 负责 处 理 控 制 需 的 实例 化 过 程 ， 我 
们 只 需 编写 构造 函数 即 可 。 

下 面 的 例子 展示 了 控制 器 初始 化 : 


function FirstController($scope) { 
$scope.message = "hello"; 


} 























», 将 控制 器 命名 为 [Name]Controller 而 不 是 [Name]Ctr1 是 一 个 最 佳 实 践 。 


正如 我 们 看 到 的 那样 ，AngularJS 会 在 创建 作用 域 时 调用 控制 需 方法 。 


细心 的 读者 会 发 现 , 我 们 是 在 全 局 作用 域 中 创建 的 这 个 函数 。 这 样 做 并 不 合适 ， 因 为 会 污染 
全 局 命名 空间 。 更 合理 的 方式 是 创建 一 个 模块 ， 然 后 在 模块 中 创建 控制 咒 ， 如 下 所 示 : 























var app = angular.module('app'，[]); 

app.controller('FirstController', function($scope) { 
$scope.message = "hello"; 

}); 





只 需 创 建 控 制 器 作用 域 中 的 函数 ， 就 能 创建 可 以 在 视图 中 使 用 的 自 定 义 操 作 。 很 幸运 ， 
AngularJS 人 允许 我 们 在 视图 中 像 调 用 普通 数据 一 样 调用 $scope 上 的 函数 。 

用 内 置 指令 ng-click 可 以 将 按钮 、 链 接 等 其 他 任何 DOM 元 素 同 点 击 事件 进行 绑 定 。ng-click 指 
令 将 浏览 器 中 的 mouseup 事 件 ， 同 设置 在 DOM 元 素 上 的 事件 处 理 程 序 绑 定 在 一 起 (例如 ， 当 浏览 器 
在 某 个 DOM 元 素 上 触发 了 点 击 事件 , 函数 就 会 被 调用 )。 和 前 面 的 例子 类 似 , 绑 定 看 起 来 是 这 样 的 : 











<dqiv ng-controller="FirstController"> 
<h4>The simplest adding machine ever/h4》> 
<button ng-click="add(1)" class="button">Addx</button> 
<a ng-click="subtract(1)" class="button alert">Subtract</a> 
<h4>Current count: {{ counter }}</h4> 
</div> 
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按钮 和 链接 都 被 绑 定 在 了 内 部 $scope 的 一 个 操作 上 ， 当 点 击 任何 一 个 元 素 时 AngularJS 都 会 
调用 相应 的 方法 。 注 意 ， 当 设置 调用 哪个 函数 时 ， 会 同时 用 括号 传递 一 个 参数 (add(1) )。 


下 面 给 FirstController 添 加 一 个 操作 : 


app.controller('FirstController', function($scope) { 
$scope.counter = 0; 
$scope.add = function(amount) { $scope.counter += amount; }; 
$scope.subtract = function(amount) { $scope.counter -= amount; }; 
二 
用 这 种 设置 方式 我 们 可 以 在 视图 中 调用 adqd( ) 或 subtract() 方 法 ， 这 两 个 方法 可 以 定义 在 
FirstController 的 作用 域 中 ,或 其 父 级 的 $scope 中 。 
控制 器 可 以 将 与 一 个 独立 视图 相关 的 业务 逻辑 封装 在 一 个 独立 的 容器 中 。 尽 可 能 地 精简 控制 
器 是 很 好 的 做 法 。 作 为 AngularJS 开 发 者 ， 使 用 依赖 注入 来 访问 服务 可 以 实现 这 个 目的 。 


AngularJS 同 其 他 JavaScript 框 架 最 主要 的 一 个 区 别 就 是 ， 控 制 器 并 不 适合 用 来 执行 DOM 操 
作 、 格 式 化 或 数据 操作 ， 以 及 除 存 储 数据 模型 之 外 的 状态 维护 操作 。 它 只 是 视图 和 $scope 之 间 的 
桥梁 。 

AngularJS 人 允许 在 $scope 上 设置 包括 对 象 在 内 的 任何 类 型 的 数据 ， 并 且 在 视图 中 还 可 以 展示 
对 象 的 属性 。 


例如 ， 我 们 在 MyController 上 创建 一 个 person 对 象 ， 这 个 对 象 只 有 name 这 一 个 属性 : 


app.controller('MyController', function($scope) { 
$scope.person = { 
name: 'Ari Lerner' 
扫 
上 


在 拥有 ng-controller='MyController ' 这 个 属性 的 元 素 内 部 的 任何 子 元 素 中 ， 都 可 以 访问 
person 对 象 ， 因 为 它 是 定义 在 $scope 上 的 。 


例如 ， 可 以 方便 地 在 视图 中 引用 person 或 person .name ， 效 果 如 图 $-1 所 示 。 


<div ng-app="myApp"> 
<div ng-controller="MyController"> 
<h1i>{{ person }}¢/hi> 
and their name: 
<h2>{{ person.name }}</h2> 
</div> 
/div% 



































{"name":"Ari Lerner"} 


图 5-1 控制 器 对 象 
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正如 看 到 的 这 样 , $scope 对 象 用 来 从 数据 模型 向 视图 传递 信息 。 同时, 它 也 可 以 用 来 设置 事 
件 监听 器 ， 同 应 用 的 其 他 部 分 进行 交互 ， 以 及 创建 与 应 用 相关 的 特定 业务 逻辑 。 

AngularJS 通 过 作用 域 将 视图 、 控 制 右 和 指令 ( 本 书后 面 会 介绍 ) 隔离 开 来 ， 这 样 就 很 容易 
为 功能 的 具体 部 分 编写 测试 。 














5.1 控制 器 从 套 〈 作 用 域 包含 作用 域 ) 


AngularJS 应 用 的 任何 一 个 部 分 ， 无 论 它 泻 染 在 哪个 上 下 文中 ， 都 有 父 级 作用 域 存 在 。 对 于 
ng-app 所 处 的 层级 来 讲 ， 它 的 父 级 作用 域 就 是 $rootScope。 

















Q、 有 一 个 例外 : 在 指令 内 部 创建 的 作用 域 被 称 作 孤 立 作用 域 。 





除了 孤立 作用 域外 , 所 有 的 作用 域 都 通过 原型 继承 而 来 , 也 就 是 说 它们 都 可 以 访问 父 级 作用 
域 。 如 果 熟 悉 面 向 对 象 编程 ， 对 这 个 机 制 应 该 不 会 陌生 。 
默认 情况 下 ，AngularJS 在 当前 作用 域 中 无 法 找到 某 个 属性 时 ， 便 会 在 父 级 作用 域 中 进行 查 
找 。 如 果 AngularJS 找 不 到 对 应 的 属性 ， 会 顺 着 父 级 作用 域 一 直 向 上 寻找 ， 直 到 抵达 $rootScope 
为 止 。 如 果 在 $rootScope 中 也 找 不 到 ， 程 序 会 继续 运行 ， 但 视图 无 法 更 新 。 


通过 例子 来 看 一 下 这 个 行为 。 创 建 一 个 ParentController ， 其 中 包含 一 个 user 对 象 ， 再 创 
建 一 个 childController 来 引用 这 个 对 象 : 













































































app.controller('ParentController', function($scope) { 
$scope.person = {greeted: false}; 


上 


app.controller('ChildController', function($scope) { 
$scope.sayHello = function() { 

$scope.person.name = 'Ari Lerner'; 

} 

1 








如 果 我 们 将 ChildController 置 于 ParentController 内部， 那 childController 的 $scope 
对 象 的 父 级 作用 域 就 是 ParentController 的 $scope 对 象 。 根 据 原型 继承 的 机 制 ， 我 们 可 以 在 子 
作用 域 中 访问 ParentController 的 $scope 对 象 。 


例如 ， 我 们 可 以 在 childcontroller 的 DOM 元 素 中 访问 定义 在 ParentController 中 的 
person 对 象 ， 如 图 5-2 所 示 。 








<div ng-controller="ParentController"> 
<div ng-controller="ChildController"> 
<a ng-click="sayHello()">Say hello¢</a> 
</div> 
{{ person }} 
</div> 


控制 器 的 这 种 艇 套 结构 和 DOM 的 拒 套 结构 很 相似 。 
我 们 看 到 ,点 击 按钮 时 ,可 以 在 Chilqdcontroller 中 访问 ParentController 中 $scope.person 的 
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值 ， 就 好 像 person 对 象 定义 在 Childcontroller 的 $scope 中 一 样 。 


sex mm 





Say hello 
{"greeted":true,"name":"Ari Lerner"} 


图 5-2 ”控制 器 般 套 EE 


控制 句 应 该 尽 可 能 保持 短小 精 悍 ， 而 在 控制 器 中 进行 DOM 操 作 和 数据 操作 则 是 一 个 不 好 的 
实践 。 

例如 ,下面 这 个 例子 中 的 控制 器 包含 了 过 于 爱 肿 的 逻辑 用 于 控制 视图 ， 并 且 还 操作 了 DOM。 

腔 肿 的 控制 占 : 





angular.module( 'myApp', [|]) 
.controller('MyController', function($scope) { 
$scope.shouldShowLogin = true; 
$scope.showLogin = function () { 
$scope.shouldShowLogin = !$scope.shouldShowLogin; 
}; 
$scope.clickButton = function() { 
$('#btn span').html('Clicked'); 
}; 
$scope.onLogin = function(user) { 
$http({ 
method: "POST ' ， 
url: '/login’', 
data: { 
user: UseT 
} 
}).success(function(data) { 
// user 
3}; 


}); 


设计 良好 的 应 用 会 将 复杂 的 逻辑 放 到 指令 和 服务 中 。 通过 使 用 指令 和 服务 , 我 们 可 以 将 控制 
需 重 构成 一 个 轻 量 且 更 易 维护 的 形式 : 


简洁 的 控制 絮 : 


angular .module( 'myApp', [|]) 
.controller('MyController', function($scope,UserSrv) { 
// 内 容 可 以 被 指令 控制 
$scope.onLogin = function(user) { 
UserSrv .runLogin(user); 
}; 
I 
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表达 式 在 AngularJS 应 用 中 被 广泛 使 用 ， 因 此 深入 理解 AngularJS 如 何 使 用 并 运算 表达 式 是 非 
常 重要 的 。 


前 面 已 经 见 过 使 用 表达 式 的 示例 。 用 {1{ }} 符 号 将 一 个 变量 绑 定 到 $scope 上 的 写法 本 质 上 就 
是 一 个 表达 式 : {{ expression }}。 当 用 $watch 进 行 监听 时 ，AngularJS 会 对 表达 式 或 函数 进行 
运算 。 

表达 式 和 eval(javascript) 非 常 相 似 ， 但 是 由 于 表达 式 由 AngularJS 来 处 理 ， 它 们 有 以 下 显 
车 不 同 的 特性 : 
口 所 有 的 表达 式 都 在 其 所 属 的 作用 域内 部 执行 ， 并 有 访问 本 地 $scope 的 权限 ; 
口 如 果 表 达 式 发 生 了 TypeError 和 ReferenceError 并 不 会 抛 出 异常 ; 
口 不 允许 使 用 任何 流程 控制 功能 (条 件 控制 ， 例 如 if/eles ); 
口 可 以 接受 过 滤器 和 过 滤器 链 。 


对 表达 式 进行 的 任何 操作 , 都 会 在 其 所 属 的 作用 域内 部 执行 , 因此 可 以 在 表达 式 内 部 调用 那 
些 限制 在 此 作用 域内 的 变量 ， 并 进行 循环 、 函 数 调用 、 将 变量 应 用 到 数学 表达 式 中 等 操作 。 




















6.1 解析 AngularJS 表达 式 


尽管 AngularJS 会 在 运行 $digest 循 环 的 过 程 中 自动 解析 表达 式 , 但 有 时 手动 解析 表达 式 也 是 
非常 有 用 的 。 


AngularJS 通 过 $parse 这 个 内 部 服务 来 进行 表达 式 的 运算 ， 这 个 服务 能 够 访问 当前 所 处 的 作 
用 域 。 这 个 过 程 允 许 我 们 访问 定义 在 $scope 上 的 原始 JavaScript 数 据 和 函数 。 


将 $parse 服 务 注 入 到 控制 器 中 ,然后 调用 它 就 可 以 实现 手动 解析 表达 式 。 举 例 来 说 ,如果 页 
面 上 有 一 个 输入 框 绑 定 到 了 expr 变 量 上 ， 如 下 所 示 : 


<div ng-controller="MyController"> 
“<input ng-model="expr" 
type="text" 
placeholder="Enter an expression" /> 
<h2>{{ parseValue }}</h2> 
</div> 


我 们 可 以 在 MyController 中 给 expr 这 个 表达 式 设置 一 个 $watch 并 解析 它 : 
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angular.module( "myApp", [|]) 

.controller('MyController', 

function($scope,$parse) { 

$scope.$watch('expr', function(newVal, oldVal, scope) { 
if (newVal !== oldVal) { 

// 用 该 表达 式 设置 parseFun 
var parseFun = $parse(newVal ) ; 
// 获取 经 过 解析 后 表达 式 的 值 


$scope.parsedValue = parseFun(scope ) ; 


潍 在 线 示例 : http://jsbin.com/UWuLALOf/1/edit?html,js,output。 


6.2 插值 字符 串 
在 AngularJS 中 ， 我 们 的 确 有 手动 运行 模板 编译 的 能 力 。 例 如 ， 插 值 允 许 基于 作用 域 上 的 某 
个 条 件 实时 更 新 文本 字符 串 。 


要 在 字符 串 模板 中 做 插值 操作 ， 需 要 在 你 的 对 象 中 注入 $interpolate 服 务 。 在 下 面 的 例子 
中 ， 我 们 将 会 将 它 注入 到 一 个 控制 希 中 : 











angular.module( 'myApp', [|]) 
.Controller('MyController '， 
function($scope, $interpolate) { 
// 我 们 同时 拥有 访问 $scope 和 $interpolate 服 务 的 权限 
站 六 


$interpolate 服 务 是 一 个 可 以 接受 三 个 参数 的 函数 ， 其 中 第 一 个 参数 是 必需 的 。 

口 text (字符 串 ): 一 个 包含 字符 插值 标记 的 字符 串 。 

口 mustHaveExpression (布尔 型 ); 如 果 将 这 个 参数 设 为 true， 当 传人 的 字符 串 中 不 含有 表 

达 式 时 会 返回 nul1。 

口 trustedContext (字符 串 ): AngularJS 会 对 已 经 进行 过 字符 插值 操作 的 字符 串通 过 
$sec.getTrusted( ) 方 法 进行 严格 的 上 下 文 转 义 。 












































| 查看 29.4 节 以 获得 关于 最 后 一 个 参数 的 更 多 细节 内 容 。 


$interpolate 服 务 返 回 一 个 也 数 ， 用 来 在 特定 的 上 下 文中 运算 表达 式 。 


设置 好 这 些 参数 后 ， 就 可 以 在 控制 器 中 进行 字符 插值 的 操作 了 。 例 如 ,假设 我 们 希望 可 以 在 
电子 邮件 的 正文 中 进行 实时 编辑 ， 当 文本 发 生变 化 时 进行 字符 插值 操作 并 将 结果 展示 出 来 。 


<div ng-controller="MyController"> 
“<input ng-model="to" 
type="email" 
placeholder="Recipient" /> 
< 七 extarea ng-model="emailBody"> </textarea> 
<pre>{{ previewText }}</pre> 
/divy 
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由 于 控制 妖 内 部 设置 了 一 个 需要 每 次 变化 都 重新 进行 字符 插值 的 自 定义 输入 字段 , 因此 需要 
设置 一 个 $watch 来 监听 数据 的 变化 。 第 23 章 将 深入 讨论 $watch。 为 了 保证 示例 的 完整 性 ， 在 这 
里 我 们 为 $watch 引 入 完整 的 代码 。 











简 而 言 之 ，$watch 函 数 会 监视 $scope 上 的 某 个 属性 。 只 要 属性 发 生变 化 就 会 调用 
对 应 的 函数 。 可 以 使 用 $watch 函 数 在 $scope 上 某 个 属性 发 生变 化 时 直接 运行 一 个 自 定 
义 函 数 。 


在 控制 器 中 ， 我们 设置 了 $watch 来 监视 邮件 正文 的 变化 ， 并 将 emailBody 属 性 的 值 进行 字符 
插值 后 的 结果 赋值 给 previewText 属 性 。 


angular .module( 'myApp', []) 
.controller('MyController', function($scope, $interpolate) { 
// 设置 监听 
$scope.$watch('emailBody', function(body) { 
if (body) { 
var template = $interpolate(body ) ; 
$scope.previewText = 
template({to: $scope.to}); 

















dl 





入 
二 


联 在 线 实例 : http://jsbin.com/oDeFuCAW/1/edit?html,js,output。 


现在 ， 在 {{ previewText }} 内 部 的 文本 中 可 以 将 {{ to }} 当 做 一 个 变量 来 使 用 ， 并 对 文本 
的 变化 进行 实时 更 新 。 


如 果 需 要 在 文本 中 使 用 不 同 于 {{ }] 的 符号 来 标识 表达 式 的 开始 和 结束 ， 可 以 在 
$inter polateProvider 中 配置 。 
用 startSymbol( ) 方 法 可 以 修改 标识 开始 的 符号 。 这 个 方法 接受 一 个 参数 。 
口 value (字符 型 ): 开始 符号 的 值 。 
用 endsymbol ( ) 方 法 可 以 修改 标识 结束 的 符号 。 这 个 方法 也 接受 一 个 参数 。 
D value (字符 型 )， 结束 符号 的 值 。 
如 果 要 修改 这 两 个 符号 的 设置 ， 需 要 在 创建 新 模块 时 将 $interpolateProvider 注 人 进去 。 
下 面 我 们 来 创建 一 个 服务 ， 第 14 章 会 对 服务 进行 深入 讨论 。 
angular.module('emailParser'，[]) 
.config(['$interpolateProvider'，function($interpolateProvider) { 


$interpolateProvider.startSymbol('__'); 
$interpolateProvider.endSymbol('__'); 





}]) 
.factory('EmailParser', ['$interpolate', function($interpolate) { 
// 处 理解 析 的 服务 
return { 
parse: function(text, context) { 
var template = $interpolate(text); 
return template(context); 
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]]) 








现在 , 我 们 已 经 创建 了 一 个 模块 ,可 以 将 它 注 人 到 应 用 中 , 并 在 邮件 正文 的 文本 中 运行 这 个 


邮件 解析 器 : 


angular.module( 'myApp', ['emailParser']) 
.controller('MyController', ['$scope', 'EmailParser', 
function($scope, EmailParser) { 
// 设置 监听 
$scope. $watch('emailBody', function(body) { 
if (body) { 
$scope.previewText = EmailParser.parse(body, { 
to: $scope.to 


}; 


现在 用 自 定义 的 _ 符号 取代 默认 语法 中 的 {{ }} 符号 来 请 求 插值 文本 。 


由 于 我 们 将 表达 式 开始 和 结束 的 符号 都 设置 成 了 _ ， 因 此 需要 将 HTML 修 改 成 用 这 个 符号 
代 {{ 的 版 本 ， 效 果 如 图 6-1 所 示 。 


《<div id="emailEditor"> 
<input ng-~model="to" 
type="email" 
placeholder="Recipient" /> 
< 七 extarea ng-model="emailBody"></textarea> 
«</div> 
<div id="emailPreview"> 
<pre>__ previewText __¢</pre> 
/div% 





人 日 日 chapter5-expressions app10 Interpolating app wr 





To: nate@fullstack.io 





hello_to_, 

Thanks for taking the time to respond to my email. 

Your friend, 

Ari 
Email body 4 
hello nate@fullstack.io, 


Thanks for taking the time to respond to my email. 


Your friend, 
Ari 





图 6-1 ”插值 文本 


联 在 线 实例 : http://isbin.com/ivuJEXI/1/edit。 
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过 滤器 用 来 格式 化 需要 展示 给 用 户 的 数据 。AngularJS 有 很 多 实用 的 内 置 过 滤器 ， 同 时 也 提 
供 了 方便 的 途径 可 以 自己 创建 过 滤器 。 

在 HTML 中 的 模板 绑 定 符号 {{ }} 内 通过 | 符号 来 调用 过 滤器 。 例 如 ， 假 设 我 们 希望 将 字符 串 
转换 成 大 写 ， 可 以 对 字符 串 中 的 每 个 字符 都 单独 进行 转换 操作 ， 也 可 以 使 用 过 滤器 : 

{{ name | uppercase }} 


在 JavaScript 代 码 中 可 以 通过 $filter 来 调用 过 滤器 ,例如 ,在 JavaScript 代 人 码 中 使 用 lowercase 
过 滤 需 : 





app.controller('DemoController', ['$scope', '$filter', 
function($scope, $filter) { 


$scope.name = $filter('lowercase' )('Ari'); 


}1); 

以 HTML 的 形式 使 用 过 滤器 时 ， 如 果 需 要 传递 参数 给 过 滤器 ， 只 要 在 过 滤 需 名 字 后 面 加 冒号 
即 可 。 如 果 有 多 个 参数 ,可 以 在 每 个 参数 后 面 都 加 入 冒号 。 例 如 ,数值 过 滤器 可 以 限制 小 数 点 后 
的 位 数 ， 在 过 滤器 后 写 上 :2 可 以 将 2 作为 参数 传 给 过 滤器 : 


<1-- 显示 : 123.46 --》> 
{{ 123.456789 | number:2 }} 


可 以 用 1 符号 作为 分 割 符 来 同时 使 用 多 个 过 滤器 ， 后 面 介 绍 自 定 义 过 滤器 时 就 会 看 到 相关 的 
例子 。 我 们 先 来 介绍 AngularJS 提 供 的 内 置 过 滤 需 。 




















1. currency 


currecy 过 滤器 可 以 将 一 个 数值 格式 化 为 货币 格式 。 用 {{ 123 | currency }} 来 将 123 转 化 
成 货币 格式 。 


currecy 过 滤器 允许 我 们 自己 设置 货币 符号 。 黑 认 情 况 下 会 采用 客户 端 所 处 区 域 的 货币 符号 ， 
但 是 也 可 以 自 定 义 货币 符号 。 


2. date 


date 过 滤器 可 以 将 日 期 格式 化 成 需要 的 格式 。AngularJS 中 内 置 了 几 种 日 期 格式 ， 如 果 没 有 
指定 使 用 任何 格式 ， 默 认 会 采用 mediumDate 格 式 ， 下 面 的 例子 中 展示 了 这 个 格式 。 


下 面 是 内 置 的 支持 本 地 化 的 日 期 格式 : 
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{{ today | date:'medium' }} ¢!-— Aug 689, 2013 12:09:02 PM --> 
{{ today | date:'short' }} ¢!-— 8/9/1312:09PM —-> 

{{ today | date:'fullDate' }} «<¢/-- Thursday, August 869, 2013 -—-> 
{{ today | date:'longDate' }} <¢/-- August 689, 260613 -->» 











| 
| 
| 
| 
{{ today | date:'mediumDate' }}¢/-- Aug 69, 2013 --> 
| 
| 
| 


{{ today | date:'shortDate' }} ¢/-- 8/9/13 --> 
{{ today | date:'mediumTime' }}¢/-- 12:609:02 PM --> 
{{ today | date:'shortTime' }} ¢/!-- 12:69 PM —-> 


@ 年 份 格式 化 


四 位 年 份 : {{ today | date:'yyyy' }} ¢/-- 2013 --> 
两 位 年 份 : {{ today | date:'yy' }} </-- 13 -> 
一 位 年 份 : {{ today | date:'y' }} ¢/-- 2613 --> 


@ 月 份 格式 化 

英文 月 份 : {{ today | date:'MMMM' }} <¢/-- August -> 
英文 月 份 简 写 : {{ today | date:'MMM' }} </!-- Aug -—-> 
数字 月 份 : {{ today ldate:'MM' }} </-- 68 --> 

一 年 中 的 第 几 个 月 份 : {{ today ldate:'M' }} </!-- 8 --> 


@ 日 期 格式 化 





数字 日 期 : {{ todayldate:'dd' }} </-- 09 --> 

一 个 月 中 的 第 几 天 : {{ today | date:'d' }} ¢</-- 9 -> 
英文 星期 : {{ today | date:'EEEE' }} ¢/-- Thursday --> 
英文 星期 简写 : {{ today | date:'EEE' }} ¢/-- Thu --> 


@ 小 时 格式 化 

24 小 时 制 数 字 小 时 : {{today|date: 'HH'}} </--60--> 

一 天 中 的 第 几 个 小 时 : {{todayldate: 'H'}} </--6--> 

12 小 时 制 数字 小 时 : {{todayl|date: 'hh'}} </--12--> 

上 午 或 下 午 的 第 几 个 小 时 : {{todayldate: 'h'}} </--12--> 


@ 分 钟 格 式 化 





数字 分 钟 数 : {{ today | date:'mm' }} ¢</!-- 69 --> 
一 个 小 时 中 的 第 几 分 钟 : {{ today | date:'m' }} </-- 9 -> 


@ 秒 数 格式 化 
数字 秒 数 : {{ today | date:'ss' }} </-- 02 --> 


一 分 钟 内 的 第 几 秒 : {{ today | date:'s' }} ¢</-- 2 -> 
毫秒 数 : {{ today | date:'.sss' }} ¢/-- .995 --> 


@ 字符 格式 化 


上 下 午 标 识 : {{ today | date:'a' }} </!-- AM --> 
四 位 时 区 标识 : {{ today | date:'Z' }} <¢/--- 67006 --> 


下 面 是 一 些 自 定义 日 期 格式 的 示例 : 


{{ today | date:'MMMd, y' }} ¢/!-- Aug9, 20613 --> 
{{ today | date:'EEEE, d, M' }} ¢/-- Thursday, 9, 8--> 
{{ today | date:'hh:mm:ss.sss' }} ¢/-- 12:09:02.995 -->» 





3. filter 
filter 过 滤 需 可 以 从 给 定数 组 中 选择 一 个 子 集 , 并 将 其 生成 一 个 新 数组 返回 。 这 个 过 滤 右 通 
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常用 来 过 小 需要 进行 展示 的 元 素 。 例 如 ,在 做 客户 端 搜索 时 ， 可 以 从 一 个 数组 中 立刻 过 滤 出 所 需 
的 结果 。 
这 个 过 滤器 的 第 一 个 参数 可 以 是 字符 串 、 对 象 或 是 一 个 用 来 从 数组 中 选择 元 素 的 函数 。 


下 面 分 情况 介绍 传人 不 同类 型 的 参数 。 











。 字符 
返回 所 有 包含 这 个 字符 串 的 元 素 。 如 果 我 们 想 返 回 不 包含 该 字符 串 的 元 素 ， 在 参数 前 加 ， 





@ 对 象 

AngularJS 会 将 待 过 滤 对 象 的 属性 同 这 个 对 象 中 的 同名 属性 进行 比较 ， 如 果 属 性 值 是 字符 串 
就 会 判断 是 否 包含 该 字符 串 。 如 果 我 们 希望 对 全 部 属性 都 进行 对 比 ， 可 以 将 $ 当 作 键 名 。 

@ 函数 

对 每 个 元 素 都 执行 这 个 函数 ， 返 回 非 假 值 的 元 素 会 出 现在 新 的 数组 中 并 返回 

例如 ， 用 下 面 的 过 滤器 可 以 选择 所 有 包含 字母 e 的 单词 : 









































{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }} 

《1-- ["Lerner", "Likes", "Eat"] —-> 

如 果 要 过 滤 对 象 , 可 以 使 用 上 面 提 到 的 对 象 过 滤器 。 例 如 ,如 果 有 一 个 由 people 对 象 组 成 的 
数组 ， 每 个 对 象 都 含有 他 们 最 喜欢 吃 的 食物 的 列表 ， 那 么 可 以 用 下 面 的 形式 进行 过 滤 : 








{{ [{ 
'name': 'Ari', 
'City': 'San Francisco', 
'favorite food': 'Pizza' 


name ': "Nate '， 
'City': "San Francisco', 
"favorite food': 'indian food' 
}] | filter:{'favorite food': 'Pizza'} }} 
<!-— [{"name":"Ari", "City": "SanFrancisco", "favoritefood": "Piz2a"}] --> 


也 可 以 用 自 定义 函数 进行 过 滤 ( 在 这 个 例子 中 函数 定义 在 $scope 上 ): 








{{ ['Ari','likes','to','travel'] | filter:isCapitalized }} 
《1-- ["Ari"] -—-> 


isCapitalized 函 数 的 功能 是 根据 首 字 母 是 否 为 大 写 返回 true 或 false， 具 体 如 下 所 示 : 




















$scope.isCapitalized = function(str) { 
return str[@] == str[0] .toUpperCase(); 


] . 
我 们 也 可 以 给 filter 过 滤器 传人 第 二 个 参数 ， 用 来 指定 预期 值 同 实际 值 进行 比较 的 方式 。 


第 二 个 参数 可 以 是 以 下 三 种 情况 之 一 。 








® true 


用 angular.equals(expected，actual ) 对 两 个 值 进行 严格 比较 。 
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@ false 
进行 区 分 大 小 写 的 子 字 符 串 比较 。 
@ 了 马 数 


运行 这 个 函数 ， 如 果 返 回 真 值 就 接受 这 个 元 素 。 





4. json 
json 过 滤器 可 以 将 一 个 JSON 或 JavaScript 对 象 转换 成 字符 串 。 这 种 转换 对 调试 非常 有 帮助 : 


{{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }} 
hs 
{ 
"name": "Ari™", 
"City": "San Francisco" 
} 


一 一 > 








5. 1imitTo 
limitTo 过 滤 需 会 根据 传人 的 参数 后 成 一 个 新 的 数组 或 字符 串 ， 新 的 数组 或 字符 串 的 长 度 取 
决 于 传人 的 参数 ， 通 过 传人 参数 的 正 负 值 来 控制 从 前 面 还 是 从 后 面 开始 截取 。 


如 果 传 入 的 长 度 值 大 于 被 操作 数组 或 字符 串 的 长 度 , 那么 整个 数组 或 字符 串 都 会 被 
返回 。 
例如 ， 我 们 可 以 截取 字符 串 的 前 三 个 字符 : 


{{ San Francisco is very cloudy | limitTo:3 }} 
<!-- San ——> 


或 最 后 的 六 个 字符 : 




















{{ San Francisco is very cloudy | limitTo:-6 }} 
¢!-— Cloudy -=-》> 


对 数组 也 可 以 进行 同样 的 操作 。 返 回 数组 的 第 一 个 元 素 : 


{{ ['a','b','c','d','e','f'] | limitTo:1 }} 
《1-- ["a"] —-> 


6. lowercase 


lowercase 过 滤器 将 字符 串 转 为 小 写 。 


{{ "San Francisco is very cloudy" | lowercase }} 
¢!-— san francisco is very cloudy -—-> 
7. number 


number 过 滤器 将 数字 格式 化 成 文本 。 它 的 第 二 个 参数 是 可 选 的 ,用 来 控制 小 数 点 后 截取 的 位 数 。 


如 果 传 入 了 一 个 非 数 字 字 符 ， 会 返 会 空 字符 串 。 





{{ 123456789 | number }} 
¢!-— 1,234,567,890 -> 
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{{ 1.234567 | number:2 }} 
¢!-—— 1.23 —-> 


8. orderBy 
orderBy 过 滤器 可 以 用 表达 式 对 指定 的 数组 进行 排序 。 


orderBy 可 以 接受 两 个 参数 ， 第 一 个 是 必需 的 ， 第 二 个 是 可 选 的 。 
第 一 个 参数 是 用 来 确定 数组 排序 方向 的 谓词 。 
下 面 分 情况 讨论 第 一 个 参数 的 类 型 。 























@ 函数 
当 第 一 个 参数 是 函数 时 ， 该 函数 会 被 当 作 待 排序 对 象 的 getter 方 法 。 
字符 


对 这 个 字符 串 进 行 解析 的 结果 将 决定 数组 元 素 的 排序 方向 。 我 们 可 以 传人 + 或 -来 强制 进行 升 
序 或 降序 排列 。 


@ 数组 


在 排序 表达 式 中 使 用 数组 元 素 作 为 谓词 。 对 于 与 表达 式 结果 并 不 严格 相等 的 每 个 元 素 , 则 使 
用 第 一 个 谓词 。 


第 二 个 参数 用 来 控制 排序 的 方向 (是否 逆向 )。 
例如 ,我 们 将 下 面 的 对 象 数 组 用 name 字 段 进 行 排序 : 

















{{ [{ 
name ': 'Ari', 
'status': 'awake' 
上 
"name Q 
'status': "Sleeping” 
| 
name ': "Nate '， 
'status': 'awake' 


}] | orderBy:'name' }} 
《!—— 
[ 
{"name": "Ari", "status": "awake"}, 
{"name": "Nate”" "status” "awake"}, 
{"name": "0Q", "status” wereeprhg" "3} 


了 


——> 


也 可 以 对 排序 结果 进行 反 转 。 例 如 ,通过 将 第 二 个 参数 设置 为 true 可 以 将 排序 结果 进行 反 转 : 





{{ [{ 
name ': 'Ari 
'status awake 
},{ 
"name' QQ > 
'status': "Sleeping” 
| 
name ': "Nate '， 
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'status': 'awake' 
}] | orderBy:'name':true }} 
= 


{ 

{"name":"Q", "status": "sleeping"}, 
{"name": "Nate", "status": "awake"}, 
{"name": "Ari", "status": "awake"} 


] 


一 一 > 


9. uppercase 
uppercase 过 滤 需 可 以 将 字符 串 转 换 为 大 写 形式 : 


{{ "San Francisco is very cloudy" | uppercase }} 
《1-- SAN FRANCISCO TS VERY CLOUDY —-> 


7.1 自 定义 过 滤器 


正如 前 面 所 见 , 创建 自 定 义 过 滤器 非常 容易 .创建 自 定 义 过 滤器 需要 将 它 放 到 自己 的 模块 中 。 
下 面 我 们 一 起 来 实现 一 个 过 滤器 ， 将 字符 串 第 一 个 字母 转换 为 大 写 。 


首先 ， 创 建 一 个 模块 用 以 在 应 用 中 进行 引用 (这 是 一 个 非常 好 的 实践 ): 


angular.module('myApp.filters'，[]) 
.filter('capitalize', function() { 
return function(input) {}; 


上 他 


过 滤器 本 质 上 是 一 个 会 把 我 们 输入 的 内 容 当 作 人 参数 传人 进去 的 函数 。 上 面 这 个 例子 中 , 我 们 
在 调用 过 滤器 时 简单 地 把 input 当 作 字 符 串 来 处 理 。 可 以 在 这 个 函数 中 做 一 些 错误 检查 : 
angular.module('myApp.filters'，[]) 
.filter('capitalize', function() { 
return function(input) { 
// input 是 我 们 传 入 的 字符 囊 
if (input) { 
return input[0] .toUpperCase() + input.slice(1); 
} 
} 
现在 , 如 果 想 将 一 个 句子 的 首 字 母 转换 成 大 写 形式 , 可 以 用 过 滤 带 先 将 整个 句子 都 转换 成 小 
写 ， 再 把 首 字母 转换 成 大 写 : 


¢!-— Ginger loves dog treats —-> 
{{ 'ginger loves dog treats' | lowercase | capitalize }} 


7.2 ”表单 验证 
能 够 根据 用 户 在 表单 中 输入 的 内 容 给 出 实时 视觉 反馈 是 非常 重要 的 。 在 人 与 人 沟通 的 语 境 
中 ， 表 单 验证 给 出 来 的 反馈 同 获得 正确 输入 同等 重要 。 


表单 验证 不 仅 能 给 用 户 提 供 有 用 的 反馈 ,同时 也 能 保护 我 们 的 Web 应 用 不 会 被 恶意 或 者 错误 
的 输入 所 破坏 。 我 们 要 在 Web 前 端 尽力 保护 后 端 。 
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问 








AngularJS 能 够 将 HTML5 表 单 验证 功能 同 它 自己 的 验证 指令 结合 起 来 使 用 ， 并 且 非 常 方便 。 


AngularJS 提 供 了 很 多 表单 验证 指令 ， 我 们 会 介绍 其 中 一 些 核心 的 验证 功能 ， 然 后 介绍 如 何 
创建 自己 的 验证 需 。 


<form name="form" novalidate> 
<label name="email">Your email</label> 
<input type="email" 
name="email" 
ng-model="email" placeholder="Email Address" /> 








</ form> 


借助 AngularJS ， 我 们 不 需要 花 太 多 额外 的 精力 就 可 以 轻松 实现 客户 端 表单 验证 功能 。 虽 然 
Web 应 用 安全 不 能 完全 依赖 客户 端 验证 ， 但 客户 端 验证 可 以 提供 表单 状态 的 实时 反馈 。 


要 使 用 表单 验证 ， 首 先 要 确保 表单 像 上 面 的 例子 一 样 有 一 个 name 属 性 。 


所 有 输入 字段 都 可 以 进行 基本 的 验证 ， 比 如 最 大 、 最 小 长 度 等 。 这 些 功 能 是 由 新 的 HTML5 
表单 属性 提供 的 。 


如 果 想 要 屏蔽 浏览 器 对 表单 的 默认 验证 行为 ， 可 以 在 表单 元 素 上 添加 novalidate 标 记 。 

下 面 看 一 下 可 以 在 input 元 素 上 使 用 的 所 有 验证 选项 。 

1. 必 填 项 

验证 某 个 表单 输入 是 否 已 填写 ， 只 要 在 输入 字段 元 素 上 添加 HTML5 标 记 required 即 可 : 
<input type="text" required /> 

2. 最 小 长 度 

验证 表单 输入 的 文本 长 度 是 否 大 于 某 个 最 小 值 , 在 输入 字段 上 使 用 AngularJS 指 令 ng-minleng= 


"{number}": 


















































<input type="text" ng-minlength="5" /> 
3. 最 大 长 度 
验证 表单 输入 的 文本 长 度 是 否 小 于 或 等 于 某 个 最 大 值 ， 在 输入 字段 上 使 用 AngularJS 指 令 


ng-maxlength=" {number}": 








<input type="text" ng-maxlength="20" /> 

4. 模式 匹配 

使 用 ng-pattern="/PATTERN/" 来 确保 输入 能 够 匹配 指定 的 正则 表达 式 : 

<input type="text" ng-pattern="[a-zA-Z]" /> 

5. 电子 邮件 

验证 输入 内 容 是 否 是 电子 邮件 ， 只 要 像 下面 这 样 将 input 的 类 型 设置 为 email 即 可 : 
<input type="email" name="email" ng-model="user.email" /> 

6. 数字 


验证 输入 内 容 是 否 是 数字 ， 将 input 的 类 型 设置 为 numpber : 
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<input type="number" name="age" ng-model="user.age" /> 
7. URL 
验证 输入 内 容 是 否 是 URL， 将 input 的 类 型 设置 为 url: 





<input type="url" name="homepage" ng-model="user .facebook_url" /> 

8. 自 定义 验证 

在 AngularJS 中 自 定义 指令 是 非常 容易 的 。 鉴 于 目前 还 没有 介绍 到 指令 的 相关 内 容 ， 第 10 章 
再 深入 研究 如 何 创建 自 定义 验证 。 目 前 先 来 看 一 下 如 何 通 过 向 后 端 服务 器 发 送 请 求 , 并 通过 响应 
的 结果 来 将 输入 字段 设置 为 合法 或 不 合法 ， 以 确保 输入 字段 中 的 内 容 是 唯一 的 。 

9. 在 表单 中 控制 变量 

表单 的 属性 可 以 在 其 所 属 的 $scope 对 象 中 访问 到 ， 而 我 们 又 可 以 访问 $scope 对 象 ， 因 此 
JavaScript 可 以 间接 地 访问 DOM 中 的 表单 属性 。 借 助 这 些 属性 ， 我 们 可 以 对 表单 做 出 实时 ( 和 
AngularJS 中 其 他 东西 一 样 ) 响应 。 这 些 属性 包括 下 面 这 些 。 

( 注意， 可 以 使 用 下 面 的 格式 访问 这 些 属性 。) 

formName. inputFieldName.property 

@ 未 修改 的 表单 


这 是 一 个 布尔 属性 ,用 来 判断 用 户 是 和 否 修改 了 表单 。 如 果 未 修改 , 值 为 true ， 如 果 修 改过 值 
为 false 



























































formName .inputFieldName.$pristine 
@ 修改 过 的 表单 
只 要 用 户 修改 过 表单 ， 无 论 输入 是 否 通 过 验证 ， 该 值 都 返回 true: 





formName .inputFieldName.$qirty 

@ 合法 的 表单 

这 个 布尔 型 的 属性 用 来 判断 表单 的 内 容 是 否 合法 。 如 果 当 前 表单 内 容 是 合法 的 , 下面 属性 的 
值 就 是 true: 











formName.inputFieldName.$valid 

@ 不 合法 的 表单 

这 个 布尔 属性 用 来 判断 表单 的 内 容 是 否 不 合法 。 如 果 当 前 表单 内 容 是 不 合法 的 , 下 面 属 性 的 
值 为 true: 


formName. inputFieldName.$invalid 








@ 错误 
这 是 AngularJS 提 供 的 另外 一 个 非常 有 用 的 属性 : $error 对 象 。 它 包含 当前 表单 的 所 有 验证 
内 容 ， 以 及 它们 是 否 合法 的 信息 。 用 下 面 的 语法 访问 这 个 属性 : 




















formName .inputfieldName .$error 
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如 果 验 证 失败 ， 这 个 属性 的 值 为 true; 如 果 值 为 false， 说 明 输入 字段 的 值 通过 了 验证 。 








10. 一 些 有 用 的 CSS 样 式 
AngularJS 处 理 表单 时 , 会 根据 表单 当前 的 状态 添加 一 些 CSS 类 ( 例如 当前 是 合法 的 、 未 发 生 
变化 的 ， 等 等 )， 这 些 CSS 类 的 命名 和 前 面 介绍 的 属性 很 相似 。 


它们 包括 : 


.ng-pristine {} 
.ng-dirty {} 
.ng-valid {} 
.ng-invalid {} 


它们 对 应 着 表单 输入 字段 的 特定 状态 。 
当 某 个 字段 中 的 输入 非法 时 ，.ng-inv1id 类 会 被 添加 到 这 个 字段 上 。 当 前 例子 中 的 站 点 将 
对 应 的 CSS 样 式 设置 为 : 











input.ng-invalid { 
border: 1px solid red; 


} 
input.ng-valid { 
border: 1px solid green; 


} 

@ $parsers 

当 用 户 同 控制 器 进行 交互 ， 并 有 晶 ngModelController 中 的 $setViewValue( ) 方 法 被 调用 时 ， 
$parsers 数 组 中 的 函数 会 以 流水 线 的 形式 被 逐个 调用 。 第 一 个 $parse 被 调用 后 ， 执 行 结果 会 传 
递 给 第 二 个 $parse， 以 此 类 推 。 

这 些 函 数 可 以 对 输入 值 进行 转换 ， 或 者 通过 $setvalidity() 函 数 设置 表单 的 合法 性 

使 用 $parsers 数 组 是 实现 自 定 义 验 证 的 途径 之 一 。 人 假设 我 们 想 要 确保 输入 值 在 某 两 个 
数值 之 间 ， 可 以 在 $parsers 数 组 中 入 栈 一 个 新 的 函数 ， 这 个 函数 会 在 验证 链 中 被 调用 。 
回 的 值 都 会 被 传人 下 一 个 $parser 中。 当 不 希望 数据 模型 发 生 更 新 时 返回 





二 





O 





每 个 $parser 返 


undefined。 


angular.module('myApp ' ) 
.directive('oneToTen'，function() { 
return { 
require: '?ngModel', 
link: function(scope, ele, attrs, ngModel) { 
if (!ngModel) return; 
ngModel .$parsers.unshift( 
function(viewValue) { 
var i = parseInt(viewValue); 


if (i >= 0 && i < 10) { 
ngModel .$setValidity('oneToTen', true); 
return viewValue; 


} else { 
ngModel .$setValidity('oneToTen', false); 


return undefined; 
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] ) ; 
@ $formatters 
当 绑 定 的 ngModqe1l 值 发 生 了 变化 ,并 经 过 $parsers 数 组 中 解析 器 的 处 理 后 ， 这 个 值 会 被 传递 


给 $formatters 流 水 线 。 同 $parsers 数 组 可 以 修改 表单 的 合法 性 状态 类 似 ，$formatters 中 的 也 
数 也 可 以 修改 并 格式 化 这 些 值 。 


比 起 单纯 的 验证 目的 , 这 些 函 数 更 常用 来 处 理 视图 中 的 可 视 变化 。 例 如 ,假设 我 们 要 对 某 个 
值 进行 格式 化 。 通 过 $formatters 数 组 可 以 在 这 个 值 上 执行 过 滤器 : 

















angular.module( 'myApp ' ) 
.directive('oneToTen', function() { 
return { 
require: '?ngModel', 
link: function(scope, ele, attrs, ngModel) { 
if (!IngModel) return; 





ngModel .$formatters.unshift(function(v) { 
return $filter('number' )(v); 


}); 
11. 组 合 实例 
下 面 我 们 一 起 创建 一 个 注册 表单 。 表 单 中 包括 用 户 的 名 字 、 邮 件 地 址 以 及 用 户 名 。 
开始 之 前 ， 首 先 看 一 下 我 们 希望 这 个 表单 长 成 什么 样子 ， 如 图 7-1 所 示 。 
在 线 示例 : http:/jsbin.com/ePomUnI/S/edit。 
下 面 开 始 定 义 表 单 : 
<form name="signup_form" novalidateng-submit="signupForm()"> 
<fieldset> 


“legend>Signup¢/1legend> 


<button type="submit" class="button radius">Submitx</button> 








</fieldset> 
</ form> 
signup form 
图 7-1 ”注册 表单 
这 个 表单 的 名 称 是 signup_form， 当 表单 提交 时 我 们 要 调用 signupForm( ) 。 
下 面 添 加 用 户 的 名 字 : 
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<div class="row"> 
<div class="large-12 columns"> 
<label>Your name</label> 
<input type="text" 
placeholder="Name" 
name=" name " 
ng-model="signup.name" 
ng-minlength="3" 
ng-maxlength="20" required /> 
</div> 
</div> 


后 面 的 章节 会 讨论 样式 方面 的 内 容 ， 现 在 我 们 只 会 简单 地 把 样式 引入 进来 。 本 章 使 用 
Foundation "作为 CSS 布 局 的 框架 。 

我 们 添加 了 一 个 表单 , 这 个 表单 有 一 个 名 为 name 的 输入 字段 , 并 且 这 个 输入 字段 被 ng-model 
指令 绑 定 到 了 $scope 对 象 的 signup .name 上 。 


不 要 忘记 给 输入 字段 添加 name 属 性 。 给 输入 字段 添加 name 属 性 非常 重要 : 这 决 
定 了 我 们 将 验证 信息 展示 给 用 户 时 如 何 引用 表单 输入 字段 。 









































同时 ， 我 们 也 设置 了 一 些 验 证 。 验 证 要 求 name 字 段 的 最 小 长 度 是 3 个 字符 ， 最 大 长 度 是 20 个 
字符 〈 当 长 度 大 于 等 于 21 时 和 输入 会 变 为 不 合法 )。 最 后 ， 我 们 要 求 name 字 段 是 必 填 项 。 
通过 使 用 这 些 属性 , 可 以 在 表单 未 通过 验证 时 控制 展示 或 隐藏 错误 列表 。 用 $dqirty 属 
保 用 户 未 对 输入 内 容 进行 修改 时 错误 内 容 不 会 显示 出 来 : 



































性 来 确 














贡 | 


<divclass="row"> 
<div class="large-12 columns"> 
<label>Your name</label> 
<input type="text" 
placeholder="Name" 
name="nName" 
ng-model="signup.name" 
ng-minlength="3" 
ng-maxlength="20" required /> 
<div class="error" 
ng-show="signup_form.name.$dirty && signup_form.name.$invalid"> 
<small class="error" 
ng-show="signup_form.name.$error.required"> 
Your name is required. 
</small> 
<small class="error" 
ng-show="signup_form.name.$error.minlength"> 
Your name is required to be at least 3 characters 
</small> 
<small class="error" 
ng-show="signup_form.name.$error.maxlength"> 
Your name cannot be longer than 20 characters 
</small> 
</div> 
</div> 
</div> 





(WY http://foundation.zurb.com/ 
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将 整个 过 程 分 开 来 看 , 我 们 只 是 像 以 前 一 样 在 表单 发 生 改变 , 且 输 入 内 容 不 合法 时 才 展 示 错 
误 内 容 。 现 在 ,我 们 会 在 特定 的 属性 未 通过 验证 时 只 展示 对 应 的 特定 DOM 元 素 。 


接 下 来 看 下 一 组 验证 ， 电 子 邮 箱 的 验证 : 








《<div class="row"> 
<div class="large-12 columns"> 
<label>Your email¢/label> 
<input type="email" 
placeholder="Email" 
name="email" 
ng-model="signup.email" 
ng-minlength="3" ng-maxlength="20" required /> 
<div class="error" 
ng-show="signup_form.email.$dirty && signup_form.email.$invalid"> 
<small class="error" 
ng-show="signup_form.email.$error.required"> 
Your email is required. 
</small> 
<small class="error" 
ng-show="signup_form.email.$error.minlength"> 
Your email is required to be at least 3 characters 
</small> 
<small class="error" 
ng-show="signup_form.email.$error.email"> 
That is not a valid email. Please input a valid email. 
</small> 
<small class="error" 
ng-show="signup_form.email.$error .maxlength"> 
Your email cannot be longer than 20 characters 
</small> 
</div> 
</div> 
过 AQiwV5 


现在 整个 表单 都 被 包含 进来 了 ,我 们 来 看 一 下 电子 邮件 的 输入 字段 。 注 意 , 我 们 将 输入 字段 
的 type 属 性 设置 为 email ， 并 且 在 $error .email 上 添加 了 验证 错误 的 信息 。 这 个 验证 同时 基于 
AngularJS 和 HTML5 属 性 实现 。 


最 后 ， 看 一 下 用 户 名 的 输入 字段 : 














<div class="1arge-12 columns"> 
<label>Username</label> 
<input type="text" 
placeholder="Desired username" 
nName="UuSername" 
ng-model="signup.username" 
ng-minlength="3" 
ng-maxlength="20" 
ensure-unique="username" required /> 
《<div class="error" 
ng-show="signup_form.username.$dirty && 
signup_form.username.$invalid"> 
<small class="error" 
ng-show="signup_form.username .$error .required"> 
Please input a username 
</small> 
<small class="error" 
ng-show="signup_form.username .$error .minlength"> 
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Your username is required to be at least 3 characters 

</small> 

<small class="error" 
ng-show="signup_form.username .$error .maxlength'"> 
Your username cannot be longer than 20 characters 

</small> 

<small class="error" 
ng-show="signup_form.username .$error .unique"> 
That username is taken, please try another 

</small> 

«</div> 
</div> 


在 最 后 一 个 输入 字段 中 除了 同 前 面相 同 的 验证 外 , 还 添加 了 一 个 自 定 义 验 证 。 这 个 牛 
证 是 用 AngularJS 指 令 定义 的 : 


全 
训 
局 


app.directive('ensureUnique', function($http) { 
return { 
require: 'ngModel', 
link: function(scope, ele, attrs, c) { 
scope.$watch(attrs.ngModel, function(n) { 
if (!In) return; 
$http({ 
method: "POST ' ， 
url: '/api/check/' + attrs.ensureUnique， 
data: { 
field: attrs.ensureUnique, 
value: scope.ngModel 
} 
}).success(function(data) { 
c.$setValidity('unique', data.isUnique); 
}).error(function(data) { 
c.$setValidity('unique', false); 
}); 


}); 

当 表 单 内 容 通 过 验证 后 ,会 向 /api/check/username 发 送 一 个 POST 请 求 来 验证 用 户 名 是 否 可 用 。 
显然 由 于 我 们 一 直 在 讨论 前 端的 代码 , 现在 并 没有 可 以 用 来 测试 这 些 内 容 的 后 端 , 尽管 实现 这 个 
后 端 并 不 复杂 。 

最 后 ， 把 按钮 放 进 去 。 可 以 用 ng-disabled 指 令 基 于 表单 的 合法 性 来 启用 或 禁用 按钮 : 














<button type="submit" 
ng-disabled="signup_form.$invalid" 
class="button radius">Submit«</button> 


在 线 示例 : http://jsbin.com/ePomUn1/5/edit。 

之 前 提 到 过 ， 表 单 本 身 会 提供 $invalid 和 $valid 属 性 。 

尽管 实时 验证 非常 有 用 , 但 是 当 用 户 还 没有 完成 输入 时 就 弹出 一 个 错误 提示 , 这 种 体验 是 非 
常 糟糕 的 。 应 该 在 用 户 提 交 表单 或 完成 当前 字段 中 的 输入 后 , 再 提示 验证 信息 ,这 样 才 是 用 户 友 
好 的 。 下 面 看 看 如 何 实 现 这 两 种 效果 。 


nl 





可 | 
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@ 在 提交 后 显示 验 证 信息 AS 


当 用 户 试图 提交 表单 时 ， 你 可 以 在 作用 域 中 捕获 到 一 个 submitted 值 ， 然 后 对 表单 内 容 进 
验证 并 显示 错误 信息 。 











井 行 


位 


例如 ， 修 改 一 下 前 面 的 例子 ， 只 在 用 户 提交 表单 时 才 显示 错误 信息 。 在 ng-show 指 令 中 加 入 


对 表单 是 否 进行 了 提交 的 检查 〈 后 面 会 实现 这 个 功能 


<form name="signup_form" 
novalidate 
ng-submit="signupForm( )" 
ng-controller="signupController"> 
‘<fieldset> 
<legend>Signup¢/legend> 
《<div class="row"> 
<div class="large-12 columns"> 
<label>Your name</label> 
<input type="text" 
placeholder="Name" 
name="name" 
ng-model="signup.name" 
ng-minlength="3" 
ng-maxlength="20"” required /> 
<div class="error" 
ng-show="signup_form.name.$dqirty && signup_form.name.$invalid && 
signup_form.submitted"> 
<small class="error" 
ng-show="signup_form.name.$error.required"> 
Your name is required. 
</small> 
<small class="error" 
ng-show="signup_form.name.$error.minlength"> 
Your name is required to be at least 3 characters 
</small> 
<small class="error" 
ng-show="signup_form.name.$error.maxlength"> 
Your name cannot be longer than 20 characters 
</small> 
</div> 
</div> 
</div> 
<button type="submit" >Submitx</button> 
</fieldset> 
</formy> 





现在 ， 仅 当 signup_form.submitted 设 置 为 true 时 ， 容 纳 错误 信息 的 div 才 会 展示 出 来 。 在 


signupForm 操 作 中 实现 这 个 行为 ， 如 下 所 示 : 


app.controller('signupController', function($scope) { 
$scope.submitted = false; 
$scope.signupForm = function() { 
if ($scope.signup_form.$valid) { 
// 正常 提交 
} else { 
$scope.signup_form.submitted = true; 


| 
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如 果 用 户 试 图 在 有 非法 输入 的 情况 下 提交 表单 , 我 们 现在 可 以 捕获 到 这 个 行为 并 展示 合适 的 
错误 信息 。 


在 线 示例 : http://jsbin.com/ePomUn1/6/edit。 
@ 在 失 焦 后 显示 验证 信息 


如 果 想 保留 实时 错误 提示 的 体验 , 可 以 在 用 户 从 某 个 输入 字段 失 焦 后 提示 错误 信息 ( 例如 用 
户 已 经 不 在 某 个 特定 的 输入 字段 中 时 )。 为 了 实现 这 个 效果 ， 需 要 实现 一 个 不 是 很 复杂 的 指令 ， 
并 向 表单 中 添加 一 个 新 的 变量 。 


我 们 需要 使 用 的 指令 是 ngFocus ， 它 是 这 样 的 : 



































app.directive('ngFocus', [function() { 
var FOCUS_CLASS = "ng-focused"; 
return { 
restrict: 'A', 
require: 'ngModel', 
link: function(scope, element, attrs, ctrl) { 
ctrl.$focused = false; 
element .bind('focus', function(evt) { 
element .addClass(FOCUS_CLASS ) ; 
scope.$apply(function() { 
ctrl.$focused = true; 
})3 
}).bind('blur', function(evt) { 
element .removeClass(FOCUS_CLASS ) ; 
scope.$apply(function() { 
ctrl.$focused = false; 
}); 
}); 


1 
将 ngFocus 指 令 添 加 到 input 元 素 上 就 可 以 使 用 这 个 指令 ， 如 下 所 示 : 





<input ng-class="{error: signup_form.name.$dirty && signup_form.name.$invalid}" 
type="text" 
placeholder="Name" 
name="name" 
ng-model="signup.name" 
ng-minlength="3" 
ng-maxlength="20" required ng-focus /> 


ngFocus 指 令 给 表单 输入 字段 的 blur 和 focus 添 加 了 对 应 的 行为 ， 添 加 了 一 个 名 为 ng-focus 


ed 的 类 ， 并 将 $focused 的 值 设置 为 true。 接 下 来 ， 可 以 根据 表单 是 否 具 有 焦点 来 展示 独立 的 错 
误 信息 。 如 下 所 示 : 





<div class="error" 
ng-show="signup_form.name. $dirty && signup_form.name.$invalid && !signup_form.name.$focused"> 


在 线 示例 : http:/jsbin.com/ePomUnI/7/edit。 


也 可 以 在 ngModel 控 制 器 中 使 用 $isEmpty() 方 法 来 判断 输入 字段 是 否 为 空 。 当 输入 字段 为 空 
这 个 方法 会 返回 true， 反 之 如 果 不 为 空 则 返回 false。 
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ngMessages(1.3+) 


众所周知 ， 表 单 和 验证 是 Angular 中 复杂 的 组 件 之 一 。 上 面 的 例子 不 是 特别 好 ， 不 简洁 。 在 
Angular 1.3 发 布 前 ， 表 单 验证 必须 以 这 种 方式 编写 。 


然而 在 发 布 的 Angular 1.3 中 , Angular 核 心 做 了 一 个 升级 。 它 不 再 需要 基于 一 个 详细 的 表达 式 
状态 创建 元 素 显示 或 隐藏 (正如 我 们 在 本 章 所 做 的 那样 )。 


<form name="signup_form" novalidate ng-submit="signupForm()" 
ng-controller="signupController"> 
<fieldset> 
“legend>Signup</1legend> 
《<div class="row"> 
<div class="large-12 columns"> 
<label>Your name</label> 
“<input type="text" placeholder="Name" name="name" ng-model="signup.name" 
ng-minlength=3 ng-maxlength=20 required /> 
<div class="error" ng-show="signup_form.name.$qirty && signup_form.name. 
$invalid && signup_form.submitted"> 
<small class="error" ng-show="signup_form.name.$error.required"> 
Your name is required.</small> 
<small class="error" ng-show="signup_form.name.$error.minlength"> 
Your name is required to be at least 3 characters</small> 
‘small class="error" ng-show="signup_form.name.$error.maxlength"> 
Your name cannot be longer than 20 characters «</small> 
</div> 
</div> 
</div> 
<button type="submit">Submitx/button> 
</fieldset> 
</ form> 


本 质 上 这 一 功能 会 检查 错误 对 象 的 状态 发 生 了 变化 。 此 外 , 我 们 还 得 到 了 站 点 中 每 个 表单 需 
要 的 很 多 额外 的 和 重复 的 标记 。 这 显然 不 是 一 个 理想 的 解决 方案 。 

从 1.3 开 始 ，Angular 中 新 增 了 一 个 ngMessages 指 令 。 

安装 

安装 ngMessages 很 简单 ， 因 为 它 被 打包 成 了 一 个 Angular 模 块 。 首 先 下 载 这 个 模块 : 


$ bower install --save angular-messages 


或 者 ， 也 可 以 从 angular.org 下 载 该 文件 并 将 它 保 存 到 项 目 中 。 还 需要 将 angular-messages.js 这 
个 JavaScrip 二 | 人 我 们 的 主 HTML 中 












































<script type="text/javascript" src="bower_components/angular-messages/angular-messages.js"> 





</script> 
最 后 ， 我 们 还 要 告诉 Angular 将 ngMessages 作 为 应 用 程序 的 依赖 模块 引入 ， 就 像 这 
angular.module( 'myApp', ['ngMessages']) 





现在 ， 我 们 已 经 安装 了 ngMessages ， 然 后 可 以 马上 开始 使 用 它 了 。 使 用 前 面 的 例子 作为 基 
础 ， 你 可 以 移 除 ng-show 指 令 ， 然 后 使 用 ngMessages 的 一 个 更 简洁 的 实现 替换 它 。 














<form name="signup_form" novalidate ng-submit="signupForm()" 
ng-controller="signupController"> 
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《label>Your name</label> 
<input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength= 
3 ng-maxlength=20 required /> 
<dqiv class="error" ng-messages="signup_form.name.$error"> 
<div ng-message="required">Make sure you enter your name</div> 
<div ng-message="minlength">Your name must be at least 3 characters</div> 
<div ng-message="maxlength">Your name cannot be longer than 20 characters</div> 
</div> 
<button type="submit">Submitx/button> 
</ form> 


借助 ngMessages ， 表 本 身 比 前 面 的 实现 更 清洁 ， 并 日 更 好 理解 。 


然而 对 于 这 个 实现 ， As 如 果 我 们 想 要 更 新 这 个 实现 同时 显示 所 有 
的 错误 将 会 怎样 ? 很 容易 。 只 需 在 ng-message 指 边 使 用 ng-messages-multiple 属 性 即 可 。 

















<div class="error" ng-messages="signup_form.name.$error" ng-messages-multiple> 
<div ng-message="required"> sure you enter your name</div> 
<div ng-message="minlength">Your name must be at least 3 characters</div> 
<dqiv ng-message="maxlength">Your name cannot be longer than 20 characters</div> 


</div> 


很 多 时 候 这 些 信 息 相互 之 间 非 常 相似 。 我 们 可 以 将 它们 保存 到 模板 中 从 而 减少 麻烦 ,而 不 是 
重新 输入 每 个 字段 的 错误 信息 。 


《1-- In templates/errors.html —-> 

<div ng-message="required">This field is required¢/div> 

<div ng-message="minlength">The field must be at least 3 characters</div> 

<div ng-message="maxlength">The field cannot be longer than 20 characters</div> 


然后 我 们 可 以 通过 在 视图 中 使 用 ng-messages-include 属 性 引入 这 个 模板 来 改进 这 个 表单 : 

















<div class+'error' ng-messages="signup_form.name.$error" 
ng-messages-include="templates/errors.html"> 
</div> 


有 了 时 ,你 可 能 希望 为 不 同 的 字段 自 定义 错误 信息 。 没 问题 , 你 可 以 在 这 个 指令 内 简单 地 插入 
一 个 自 定义 错误 信息 。 由 于 ngMessages 涉 及 ngMessages 容 器 中 错误 列表 的 顺序 ， 我们 可 以 通过 
在 这 个 指令 中 列 出 自 定义 错误 信息 的 方式 覆盖 它们 。 








<div class="error" ng-messages="signup_form.name.$error" 
ng-messages-include="templates/errors.html"> 

《1—— 

除了 minlength 会 被 覆盖 之 外 ， 其 他 每 个 信息 都 会 保持 不 变 

一 一 > 

</div> 


此 外 ， 其 至 还 可 以 为 自 定义 验证 创建 自 定义 消息 。 可 以 通过 修改 模型 的 sparsers 链 做 到 这 


vo 


例如 ， 比 方 说 我 们 想 要 创建 一 个 自 定义 验证 器 验证 用 户 名 在 一 个 注册 表单 中 是 否 有 效 : 


























app.directive('ensureUnipue', function($http) { 
return { 
require: 'ngModel', 
link: function(scope, ele, attrs, ctrl) { 


ctrl.$parsers.push(function(val) { 
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// 在 这 里 添加 验证 
}); 


}); 
对 于 ngModel ， 你 可 以 添加 可 以 使 用 ngMessage 指 令 显 示 / 隐 藏 的 自 定义 信息 。 还 可 以 添加 可 
以 使 用 ngMessage 指 令 检查 的 带 有 自 定义 的 消息 的 指令 ,例如 , 改变 前 面 使 用 ngMessages 的 例子 。 


" ng-controller="signupController" 











<form name="signup_form" novalidate ng-submit="signupForm()" 
ensure-unique="/api/checkUsername. json"> 
<label> 
Your name 
</label> 
<input type="text" placeholder="Username" name="Uusername" 
ng-minlength=3 ng-maxlength=20 required /> 
<div class="error" ng-messages="signup_form.username.$error"> 
《<div ng-message="required"> 
Make sure you enter your username 
</div> 
<div ng-message="checkingAvailability"> 
Checking... 
*/divy 
《<div ng-message="UusernameAvailablity"> 
The username has already been taken. Please choose another 


" ng-model="signup.username" 


</div> 
</div> 
<button type="submit"> 
Submit 
</button> 
</ form> 


在 这 中 用 法 中 ,我们 检查 了 错误 信息 的 自 定义 属性 。 为 了 添加 自 定义 错误 消息 , 我 们 将 会 把 
它们 应 用 到 自 定义 ensureUnique 指 令 的 ngModel 中 。 








app.directive('ensureUnique', function($http) { 
return { 
require: 'ngModel', 
link: function(scope, ele, attrs, ctr1l) { 
var url = attrs.ensureUnique; 


ctr1.$parsers.push(function(val) { 
if (!val || val.length === @) { 
return; 


} 


ngModel .$setValidity('checkingAvailability', true); 
ngModel .$setValidity('usernameAvailablity', false); 


$http({ 
method: "GET ' ， 
Url: 天 
params: { 
username: val 
} 
}).success(function() { 
ngModel 
.$setValidity('checkingAvailability', false); 


ngModel 
.$setValidity('usernameAvailablity', true); 





图 灵 社 区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 








站 


})['catch'] (function() { 
ngModel 
.$setValidity('checkingAvailability', false 
ngModel 
.$setValidity('usernameAvailablity', false) 
}); 
return val; 


}) 
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指令 简介 








作为 Web 开 发 者 我 们 都 非常 熟悉 HIML。 下 面 简单 回顾 一 下 并 统一 我 们 对 这 个 最 基本 的 Web 
技术 的 认识 。 


1. HTML 文 档 


HTML 文 档 是 一 个 纯 文 本 文件 ， 包含 了 页 面 的 结构 以 及 由 CSS 定 义 的 样式 ,或 者 可 以 操作 样 
式 的 JavaScript 代 码 。 


2. HTML 节 点 

HTML 节 点 是 栅 套 在 男 一 个 元 素 内 的 元 素 或 一 串 字 符 。 除 了 文本 节点 外 , 所 有 元 素 都 是 节点 。 
3. HTML 元 素 

HTML 元 素 由 一 个 开始 标签 和 一 个 结束 标签 组 成 。 

4. HTML 标 签 

HTML 标 签 用 来 标记 元 素 的 开始 和 结束 。 标 签 本 身 用 尖 括 号 来 声明 。 

开始 标记 的 名 字 会 同时 被 当 作 元 素 的 名 字 ， 同 时 标签 还 会 包含 用 来 修饰 元 素 的 属性 。 

5. 属性 


属性 用 来 给 HTML 元 素 添 加 额外 的 信息 。 这 些 属性 设置 在 开始 标记 中 。 可 以 使 用 形 如 
key="value" 的 键 值 对 设置 它们 ,或 者 只 设置 键 。 


我 们 看 看 ca> 超 链接 标签 ， 它 可 以 创建 从 一 个 页 面 到 男 一 个 页 面 的 链接 : 很 多 标签 和 超 链 接 
标签 一 样 , 会 有 很 多 特殊 的 属性 ,这 些 属性 就 好 比 标签 的 参数 。 例 如 ， 超 链接 标签 的 nref 属 性 会 
激活 该 标签 的 行为 ， 同 时 在 大 多 数 浏览 咒 中 会 将 开始 和 结束 标记 中 间 的 文本 转换 为 默认 的 蓝 色 。 


<a href="http://goo0gle.com"> 
Click me to go to Google/ay> 


“ay 标签 定义 了 一 个 从 当前 页 面 到 本 站 或 站 外 另 一 个 页 面 之 间 的 链接 ，href 属 性 定义 了 链接 
的 目标 。 


而 下 面 这 个 按钮 元 素 则 与 此 非常 不 同 : 


<button href="http://google.com" 
type="submit">Click me</button> 


默认 情况 下 超 链 接 标 签 是 蓝 色 且 有 下 划 线 的 , 而 按钮 标签 在 浏览 器 中 看 起 来 是 一 个 可 点 击 的 按钮 。 
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超 链接 标签 知道 当 自 己 的 nref 属 性 被 设置 为 nttp://google.com 之 后 , 如 果 用 户 点 击 这 个 超 
链接 ， 它 应 该 修改 地 址 栏 的 URL 并 加 载 Google 的 首页 。 


而 按钮 标签 则 完全 忽略 href 属性， 并 不 会 在 被 点 击 时 有 同样 的 行为 。 

因此 ,修改 地 址 栏 的 URL 并 将 你 带 到 一 个 新 的 页 面 是 超 链接 的 预 轩 行 为 ,而 不 是 按 馈 的 预 轩 
行为 。 

最 后 ， 两 个 标签 在 设置 了 title 属 性 时 则 有 相同 的 行为 ， 当 用 户 将 鼠标 悬 停 在 元 素 上 时 会 出 
现 一 个 提示 框 。 



































<a _ href="http://google.com" 
title="click me"> 
Click me to go to Google 

</a> 

<button type="submit" 
title="click me">Click me</button> 


总 地 来 说 ， 浏 览 器 会 演 染 HTML 元 素 的 样式 和 行为 ， 这 个 能 力 是 Web 强 大 功能 的 基础 之 一 。 
任何 一 个 浏览 器 厂商 ， 无 论 是 Google 或 Microsoft 都 尽量 遵循 同样 的 HTML 标 准 ， 以 此 来 保证 
Web 编 程 在 跨 设备 和 操作 系统 时 的 一 致 性 。 


老 版 本 的 正 浏 览 器 并 没有 遵循 标准 的 HTML 定 义 ， 因 此 我 们 需要 一 些 技巧 才能 让 其 
正常 工作 。 更 多 内 容 请 查看 第 30 章 。 























近来 出 现 了 很 多 新 的 HTML 标 签 ， 它 们 是 HTML5 标 准 的 一 部 分 。 例 如 video 标 签 可 以 定义 一 
个 视频 、 电 影 剪 辑 或 流 视频 : 





<Video href="/goofy-video.mp4"></video> 


这 些 HTML5 的 新 标签 在 比较 新 的 浏览 器 中 可 以 正常 工作 ,但 是 IE8 或 更 早 的 IE 浏 览 器 都 没有 
对 其 提供 支持 。 


8.1 指令 : 自 定义 HTML 元 素 和 属性 


基于 我 们 对 HTML 元 素 的 理解 , 指令 本 质 上 就 是 AngularJS 扩 展 具 有 自 定义 功能 的 HTML 元 素 
的 途径 。 例 如 ， 我 们 可 以 创建 一 个 自 定义 元 素 ， 它 实现 了 <video> 标 签 的 功能 并 且 能 在 所 有 浏览 
髓 中 工作 : 








<my-better-video my-href="/goofy-video.mp4"> 
Caneventaketext</my-better-video> 


注意 ， 这 个 自 定义 元 素 使 用 了 特殊 的 开始 和 闭合 标签 my-better-video， 以 及 my-href 这 个 
自 定义 属性 。 


为 了 让 这 个 标签 更 有 用 ， 可 以 将 浏 览 器 默认 的 video 标 签 重 载 ， 用 下 面 这 种 写法 代替 它 : 








<video my-href="/goofy-video.mp"> 
Can still take children nodes 
</videoy> 


正如 我 们 看 到 的 那样 , 指令 可 以 和 其 他 指令 或 属性 组 合 在 一 起 使 用 , 这 种 组 合 使 用 的 方式 叫 
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做 合成 。 

为 了 有 效 了 解 如 何 将 一 个 个 小 组 件 组 合成 一 个 复杂 的 系统 , 首先 要 了 解 更 基础 的 内 容 。 接 下 
来 几 节 的 目标 就 是 帮助 你 了 解 这 些 基 础 内 容 ， 我 们 开始 吧 。 

1. HTML 引 导 

当 浏 览 器 加 载 一 个 包含 AngularJS 应 用 的 HTML 时 ,我 们 只 需要 一 小 段 很 简单 的 代码 就 能 够 启 
动 AngularJS 应 用 ( 前面 的 章节 介绍 过 相关 内 容 )。 

在 HTML 中 要 用 内 置 指令 ng-app 标 记 出 应 用 的 根 节 点 。 这 个 指令 需要 以 属性 的 形式 来 使 用 ， 
因此 可 以 将 它 写 到 任何 位 置 ， 但 是 写 到 chtmly 的 开始 标签 上 是 最 常规 的 做 法 : 























内 置 指令 是 打包 在 AngularJS 内 部 的 指令 。 所 有 内 置 指令 的 命名 空间 都 使 用 ng 作 
为 前 级 。 为 了 防止 命名 空间 冲突 ， 不 要 在 自 定义 指令 前 加 ng 前 组 。 
<html ng-app="myApp"> 


<!-- 应 用 的 $rootScope --》> 
</html> 


现在 , 在 HTML 元 素 中 可 以 使 用 所 有 内 置 或 自 定义 指令 了 。 同时， 基于 JavaScript 的 原型 继承 
机 制 ， 任 何在 这 个 根 元 素 内 部 的 指令 只 要 能 够 访问 作用 域 ， 就 可 以 访问 $rootScope。 这 里 的 能 
够 访问 作用 域 指 的 是 同 DOM 进 行 了 链接 ， 这 个 操作 会 在 指令 稍 后 的 生命 周期 中 进行 。 

由 于 指令 的 生命 周期 非常 复杂 , 会 有 专门 的 章节 来 介绍 。 在 那 部 分 内 容 中 还 会 讨论 指令 中 哪 
些 方 法 是 可 以 访问 作用 域 的 ， 以 及 作用 域 是 如 何在 指令 间 共 享 的 。 详 细 内 容 请 查看 第 10 章 。 

2. 我 们 的 第 一 个 指令 

学 习 指令 最 快 的 途径 就 是 亲自 使 用 它 ， 让 我 们 来 创建 一 个 自 定义 指令 。 看 看 下 面 的 HTML 元 
素 ， 后 面 我 们 会 用 到 它 : 

<my-directive></my-directive> 

假设 我 们 已 经 创建 了 一 个 完整 的 HTML 文 档 ， 其 中 包含 了 AngularJS， 并且 DOM 中 已 经 用 
ng-app 指 令 标识 出 了 应 用 的 根 元 素 ， 当 AngularJS 编 译 HTML 时 就 会 调用 指令 。 


























OO 10.3 节 会 介绍 指令 生命 周期 中 的 编译 阶段 。 








调用 指令 意味 着 执行 指令 背后 与 之 相关 联 的 JavaScript 代 码 ,这 些 代码 是 我 们 用 指令 定义 写 出 
来 的 。 
myDirective 指 令 的 定义 看 起 来 是 这 样 的 


angular .module( 'myApp',[]) 
.directive( 'myDirective', function() { 
return { 
restrict: 'E', 
template: '《a href="http://google.com"> 
Click me to go to Google</a>' 
} 
| 
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上 面 的 Java 


Script 代码 就 是 指令 定义 ， 效 果 如 图 8-1 所 示 。10.1 节 会 介绍 定义 指令 


时 所 有 的 可 用 设置 。 











Click me to go to Google 


图 8-1 简单 指令 的 实践 


通过 AngularJS 模 块 API 中 的 .directive() 方 法 ,我 们 可 以 通过 传人 一 个 字符 串 ne 
人 








符 串 是 这 个 指令 的 名 字 , 指令 名 应 该 是 驼峰 命名 风格 的 ， 函 数 应 该 返 








注册 | 新 指令 ~ O 其 中 字 
一 个 对 象 。 








OO: 驼峰 命名 风格 用 来 将 一 个 短语 写 在 一 个 单词 中 ， 除 了 第 一 个 单词 外 其 他 单词 首 


字母 大 写 
bumpyRoad 


， 中 间 不 加 空格 。 例 如 ，bumpy roads 用 驼峰 风格 来 写 应 该 是 


So 


| 在 我 们 的 例子 中 ， 在 HTML 里 使 用 my-directive 声 明 指 令 ， 因 此 指令 定义 必须 


以 myDirec 


directive( ) 方 法 返 
为 了 尽快 掌握 简单 


第 10 章 将 详细 介 
者 工具 来 对 比 一 下 输入 


tive 为 名 字 。 





回 的 对 象 中 包含 了 用 来 定义 和 配置 指令 所 需 的 方法 和 属性 。 
的 属性 定义 ， 我 们 只 用 了 restrict 和 template 两 个 设置 项 来 定义 指令 。 


绍 定义 指令 时 所 有 可 用 的 方法 和 属性 ， 但 现在 ， 先 用 Google Chrome 的 开发 
的 HTML 和 输出 的 HTML。 











首先 用 Chrome 打 开 你 的 HTML 文 档 ， 会 看 到 一 个 蓝 色 的 “Click Here” 链 接 。 点 击 View 一 
Developer 一 View Source 来 查看 源 代码 ， 会 看 ee 的 画面 。 





eo Developer Tools - file:///tmp/index.html 





Styles Computed Event Listeners » 
vd 
ee element, style { + 深交- 
v< Sy 0- de nyApp" class="ng-scope"> } 





<di 
b> < I -directive> 
</ 


rr type="text/javascript">..</script> 
bod 





a : | “padding- 











党 


,= Q html | body.ng-scope | div | my-directive | 
图 8-2 ”Chrome 开发 者 工具 
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注意 ， a 你 在 文本 编辑 器 中 输入 的 没有 区 别 ， 同 时 其 中 并 没有 一 个 链接 标签 。 但 的 确 屏 
幕 上 有 一 个 链接 写 着 “Click Here”， 这 是 怎么 回 事 ? 


为 了 分 析 这 个 现象 ， 右 键 点 击 链接 ， 在 弹出 菜单 中 选择 Inspect Element， 如 图 8-3 所 示 。 


Clckmetogote 一 一 
Open Link in New Tab 


Open Link in New Window 

Open Link in Incognito Window 

Save Link As... 

Copy Link Address 

Copy 

Search Google for 'Click me to go to Google' 
Print... 





二 Apps > 
意 Buffer Selected Text 

NW Read this link later 

国 Share link with TweetDeck 


Inspect Element 
Look Up in Dictionary 
Speech p 


Services Pp 


8-3 Inspect Element 


这 样 就 可 以 打开 Chrome 开 发 者 工具 ， 并 看 到 AngularJS 在 页 面 加 载 以 及 调用 指令 定义 后 生成 
的 代码 ，AngularJS 把 生成 后 的 代码 提供 给 Chrome 进 行 演 染 ， 如 图 8-4 所 示 。 














@eOe Developer Tools - file:///tmp/index.html we 
MEG | Resources Network Sources Timeline Profiles Audits Console 
Styles Computed Event Listeners » 
v<html> sb; 
* <head>..</head> element, style { + 尝 将- 
Vv <body ng-app="myApp" class="ng-scope"> } 
Y<div> ai-webkit~any~ user agent stylesheet 
v<my-directive> link { 
<a de SD oo com">Click me to color: -webkit-link; 
| g text-decoration: underline; 
pp cursor: auto; 
</div> 
I* <Script type="text/javascript">..</script> 
</body> 
</html> 
串 ， XE Q html body.ng-scope div my-directive | 类 


图 8-4 查看 指令 内 部 
默认 情况 下 ，AngularJS 将 模板 生成 的 HTML 代 码 嵌 套 在 自 定义 标签 cmy-directive> 内 部 。 


下 面向 指令 定义 中 添加 一 些 新 的 设置 : 我 们 可 以 将 自 定义 标签 从 生成 的 DOM 中 完全 移 除 掉 ， 
并 只 留 下 由 模版 生成 的 链接 。 将 replace 设 置 为 true 就 可 以 实现 这 个 效果 : 





angular.module('myApp'，[]) 
.directive('myDirective'，function() { 
return { 
restrict: 'E', 
replace: true, 
template: '<a href="http://google.com">Click me to go to Google¢/a>' 
和 
六 


再 次 看 一 下 生成 后 的 代码 ,会 发 现 DOM 中 原始 的 指令 声明 已 经 不 见 了 ， 只 有 我 们 在 模板 中 


写 的 HTML 代 码 。replace 方 法 会 用 自 定义 元 素 取代 指令 声明 ， 而 不 是 向 套 在 其 内 部 ， 如 图 8-5 
所 示 。 
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四 日 日 Developer Tools - file:///tmp/index.html wr” 
EGG Resources Network Sources Timeline Profiles Audits Console 
Styles Computed Event Listeners » 
v<html> 3 
> <head>,..</head> element,. style { + 涛 兴 ” 
Y <body ng-app="myApp" class="ng-scope"> } 
Y<div> ai-webkit-any- ”USer agent stylesheet 
<a Deer "http://google.com">Click me to go link { 
to Google</a> color: -webkit-Link; 
i text-decoration: underline; 
* <script type="text/javascript">..</script> cursor: auto; 
</body> } 
</html> 
border 本 
‘ padding- 
回 , 并 Q html | body.ng-scope | div 四 ] 





图 8-5 ” 蔡 换 现 有 元 素 


从 现在 起 ,我 们 把 创建 的 这 些 自 定义 元 素 称 作 指令 ( 用 .directive() 方 法 创建 )， 因 为 事实 
上 声明 指令 并 不 需要 创建 一 个 新 的 自 定义 元 素 。 











OO 声明 指令 本 质 上 是 在 HTML 中 通过 元 素 、 属 性 、 类 或 注释 来 添加 功能 。 








下 面 都 是 用 来 声明 前 面 创建 指令 的 合法 格式 : 


<my-directive> </my-directive> 
<div my-directive> </div> 

<div class="my-directive"></div> 
¢!—-directive:my-directive——» 


为 了 让 AngularJS 能 够 调用 我 们 的 指令 ， 需 要 修改 指令 定义 中 的 restrict 设 置 。 这 个 设置 告 
诉 AngularJS 在 编译 HTML 时 用 哪 种 声明 格式 来 匹配 指令 定义 。 我 们 可 以 指定 一 个 或 多 个 格式 。 


例如 ， 之 前 创建 的 指令 中 可 以 指定 以 元 素 (E)、 属 性 (A)、 类 (〈C ) 或 注释 (M ) 的 格式 来 
调用 指令 


angular.module( 'myApp', []) 
.directive( 'myDirective', function() { 
return { 
restrict: 'EAC', 
replace: true, 
template: '«a href="http://google.com">Click me to go to Google</a>' 





}; 
3 


无 论 有 多 少 种 方式 可 以 声明 指令 ,我 们 坚持 使 用 属性 方式 ,因为 它 有 比较 好 的 跨 浏 览 器 兼容 性 : 


<div my-directive> </div> 


为 了 更 加 明确 我 们 的 意图 ， 将 restrict 设 置 为 字母 A ( 代表 attribute ): 











restrict: 'A' 


遵循 这 个 约定 的 同时 ， 也 要 注意 每 个 浏览 器 的 内 置 样式 ， 以 便 决定 指令 模板 在 HTML 中 是 
套 在 声明 元 素 内 ， 还 是 替换 声明 元 素 。 











王 
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3. 关于 IE 浏览 器 

如 果 你 正在 使 用 下 浏览 器 ， 打 开 这 个 在 线 示例 "。 会 发 现 尽管 指令 声明 了 两 次 ， 但 只 出 现 了 
一 个 链接 。 

从 技术 上 讲 ， 可 以 通过 在 文档 头 部 声明 新 的 标签 ( 查看 第 30 章 ) 来 解决 这 个 问题 , 但 这 样 做 
的 后 果 就 是 ， 当 下 忽 了 一 致 性 时 会 导致 额外 的 问题 。 

因此 ， 好 的 经 验 法 则 就 是 始终 用 属性 来 声明 指令 ( 就 像 我 们 之 前 做 的 那样 )， 这 样 会 给 以 后 
带 来 方便 。 

值得 注意 的 一 个 例外 是 ,扩展 内 置 HTML 标 签 ,例如 用 AngularJS 重 载 ca> 、<form> 和 <input>。 
这 些 场 景 不 会 导致 浏览 器 的 兼容 性 问题 ， 因 为 它们 本 身 就 是 浏览 器 所 文 持 的 标签 。 

4. 表达 式 

由 于 指令 可 以 用 属性 的 形式 调用 ， 我 们 可 能 会 好 奇 如 果 给 属性 赋值 会 发 生 什 么 : 

<h1 ng-init="greeting='HelloWorld'"> 


The greeting is: {{ greeting }} 
/htiy 










































































在 线 示例 : http://jsbin.conVIdUYexO/2/edit。 

我 们 将 表达 式 greeting = 'Hello wor1d' 赋值 给 内 置 指令 ng-init。 在 表达 式 中 ， 我 们 将 
greeting 属 性 的 值 设 置 为 Hel lo Wor1d， 然 后 计算 花 括 号 内 的 {{ greeting }} 这 个 表达 式 的 值 。 

这 两 种 情况 都 会 在 当前 作用 域 中 计算 一 个 普通 的 JavaScript 表 达 式 ,根据 这 个 表达 式 放 置 的 位 
置 不 同 ， 当 前 作用 域 可 以 是 AngularJS 在 应 用 局 动 时 调用 ng-app 实 例 化 的 $rootScope ， 也 可 以 是 
某 个 子 作 用 域 ， 比 如 某 个 控制 器 的 作用 域 。 


@ 用 表达 式 来 声明 指令 


我 们 知道 声明 指令 时 既 可 以 使 用 表达 式 , 也 可 以 不 使 用 表达 式 。 下 面 回 顾 一 下 几 种 合法 的 表 
达 式 声明 : 

















<my-directive="someExpression"> 

</my-directive> 

《<div my-directive="someExpression"> 

/div% 

《<div class="my-directive:someExpression"> 
«</div> 

¢!-— directive: my-directive someExpression 一 -》 


这 里 有 一 个 值得 注意 的 问题 ， 赋 值 给 指令 的 表达 式 会 在 哪个 环境 中 运行 ? 要 回答 这 个 问题 ， 
首先 要 了 解 一 个 复杂 但 非常 重要 的 概念 ， 就 是 当前 作用 域 ， 它 由 DOM 周 围 骨 套 的 控制 器 提供 。 


@ 当前 作用 域 介绍 


首先 快速 了 解 一 下 由 DOM 通 过 内 置 指令 ng-controller 提 供 的 作用 域 。 这 个 指令 的 作用 是 在 
DOM 中 创建 一 个 新 的 子 作用 域 : 




















<p>We can access: {{ rootProperty }}</p> 





GD http://jsbin.com/IJAzUJE/1/edit 
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它们 


8.2 


<div ng-controller="ParentController"> 
<p>wWe can access: {{ rootProperty }} 
and {{ parentProperty }}</p> 
<div ng-controller="ChildController"> 
<p> 
We can access: 
{{ rootProperty }} and 
{{ parentProperty }} and 
{{ childProperty }} 
</p> 
<p>{{ fullSentenceFromChild }}</p> 
</div> 
</div> 


angular .module( 'myApp', []) 
.run(function($rootScope) { 
// 使 用 .run 访 问 $rootScope 
$rootScope.rootProperty = 'root scope'; 
}) 
.controller('ParentController', function($scope) { 
// 使 用 .controller 访 问 `“ng-controller ~ 内 部 的 属性 
// 在 DOM 忽 略 的 $scope 中 ， 根 据 当 前 控制 器 进行 推断 
$scope.parentProperty = 'parent scope ' ; 
}) 
.controller('ChildController', function($scope) { 
$scope.childProperty = 'child scope'; 
// 同 在 DOM 中 一 样 ， 我 们 可 以 通过 当前 $scope 直 接 访 问 原型 中 的 任意 属性 
$scope. fullSentenceFromChild = 'Same $scope: We can access: 
$scope.rootProperty + ' and ' + 
$scope.parentProperty + ' and ' + 
$scope.childProperty 


吾 


}); 
在 线 示例 : http://jsbin.com/URuyoG/1/edit， 为 方便 学 习 ， 有 些 部 分 使 用 了 彩色 。 
更 多 关于 ng-controller 的 内 容 请 查看 9.2 节 。 


注意 ， 还 有 其 他 内 置 指令 (比如 ng-include 和 ng-view ) 也 会 创建 新 的 子 作 用 域 ， 这 意味 着 
在 被 调用 时 行为 和 ng-controller 类 似 。 我们 在 构造 自 定 义 指 令 时 也 可 以 创建 新 的 子 作 用 域 。 





向 指令 中 传递 数据 


回顾 一 下 如 何 定 义 指 令 : 


angular .module( 'myApp', []) 
.directive( 'myDirective', function() { 
return { 
restrict: 'A', 
replace: true, 
template: '<a href="http://google.com"»>Click me to go to Google</a>' 
} 
1 


注意 ， 我 们 在 模板 中 硬 编码 了 URL 和 链接 文本 : 
template:'《a href="http://google.com"> Click me to go to Google/a> 


AngularJS 并 没有 限制 在 指令 的 模板 中 硬 编 码 字符 串 。 
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如 果 不 将 URL 和 链接 文本 混在 指令 内 部 , 可 以 为 其 他 使 用 我 们 指令 的 人 提供 更 好 的 体验 。 我 
们 的 目标 是 关注 指令 的 公共 接口 ， 就 像 其 他 任何 编程 语言 一 样 。 实 际 上 ,应 该 将 上 面 的 模板 转换 
成 可 以 接受 两 个 变量 的 形式 : 一 个 变量 是 URL， 男 一 个 是 链接 文本 : 








template: '《a href="{{ myUrl }}">{{ myLinkText }}</a>' 


在 主 HTML 文 档 中 ， 可 以 给 指令 添加 myUrl 和 myLinkText 两 个 属性 ， 这 两 个 参数 会 成 为 指令 
内 部 作用 域 的 属性 : 
《<div my-directive 
my-—url="http://google.com" 
my-link-text="Click me to go to Google"> 
</div> 
重新 加 载 页 面 , 注意 声明 指令 的 部 分 已 经 被 模板 代替 , 但 是 链接 的 href 
括号 内 也 没有 文本 ， 如 图 8-6 所 示 。 








性 是 空 的 , 并 且 尖 





到 
fo 





Bee Developer Tools ~ file:///tmp/index.html 
EGG Resources Network Sources Timeline Profiles Audits Console 
Styles Computed Event Listeners » 
一 
> <head>..</head> Ns { + 深交 


v <body ng-app="myApp" class="ng-scope"> 
v<div> a:-webkit-any— user agent stylesheet 
my-directive my-url="http:// k { 
com" my-link-text="Click me" class= 

g"></a> 


lin| 
color: -webkit-link; 
text-decoration; underline; 
cursor: auto; 





Pp <script type="text/javascript">..</script> 








</body> 
</html> 
器 , EE Q html body.ng-scope div 是 Ra 的 


图 8-6 ”更 新 模板 


有 好 几 种 途径 可 以 设置 指令 内 部 作用 域 中 属性 的 值 。 最 简单 的 方法 就 是 使 用 由 所 属 控制 器 提 
供 的 已 经 存在 的 作用 域 。 

尽管 简单 ， 共 享 状态 会 导致 很 多 其 他 问题 。 如 果 控 制 絮 被 移 除 , 或 者 在 控制 器 的 作用 域 中 也 
定义 了 一 个 叫 myur1l 的 属性 ， 我 们 就 被 迫 要 修改 代码 ， 这 是 成 本 很 高 上 且 让 人 诅 丧 的 事情 。 

AngularJS 人 允许 通过 创建 新 的 子 作 用 域 或 者 隔离 作用 域 来 解决 这 个 常见 问题 。 

同 之 前 在 当前 作用 域 介 绍 中 介绍 的 继承 作用 域 ( 子 作用 域 ) 不 同 ， 隔 离 作用 域 同 当 

前 DOM 的 作用 域 是 完全 分 隔 开 的 。 为 了 给 这 个 新 的 对 象 设置 属性 ， 我 们 需要 显 式 地 通 

过 属性 传递 数据 ， 同 在 JavaScript 或 Ruby 中 给 方法 传递 参数 类 似 。 

当 用 如 下 代码 将 指令 的 作用 域 设置 成 一 个 只 包含 它 自 己 的 属性 的 干净 对 象 时 : 


scope: { 
someProperty: "needs to be set" 



































} 
实际 上 创造 的 是 隔离 作用 域 。 本 质 上 , 意味 着 指令 有 了 一 个 属于 自己 的 $scope 对 象 , 这 个 对 
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只 能 在 指令 的 方法 中 或 指令 的 模板 字符 串 中 使 用 : 


template: '<div>\ 
we have access to {{ someProperty }}\ 
</div>', 
controller: function($scope) { 
// 指 令 可 以 有 它 自己 的 控制 器 
// 那 种 情况 下 我 们 可 以 





// =>〉 错误 111 

$scope.someProperty === "needs to be set"; 
} 
错误 ? 


目前 为 止 , 我 们 一 直 忽 略 了 一 个 细节 
接 设 置 someProperty 属 性 。 





。 实际 上 不 能 像 上 面 的 例子 那样 ,在 作用 域 对 象 内 部 直 





scope: { 
// 这 样 行 不 通 
someProperty: 'needs to be set' 


} 
实际 上 要 在 DOM 中 像 之 前 提 到 过 的 那样 ， 像 给 函数 传递 参数 一 样 ， 通 过 属性 来 设置 值 : 
<div my-directive 


some-property="someProperty with @ binding"> 
</div> 


现在 ， 我 们 在 作用 域 对 象 内 部 把 someProperty 值 设置 为 @6 这 个 绑 定 策略 。 这 个 绑 定 策略 告诉 
AngularJS 将 DOM 中 some-property 属 性 的 值 复制 给 新 作用 域 对 象 中 的 someProperty 属 性 

















scope: { 
someProperty: '@' 


} 


围 上 > 


注意 ， 默 认 情 况 下 someProperty 在 DOM 中 的 映射 是 some-property 属 性 。 如 果 我 们 想 显 式 
间 定 绑 定 的 属性 名 ， 可 以 用 如 下 方式 : 




















scope: { 
someProperty: '@someAttr' 


} 
在 这 个 例子 中 ， 被 绑 定 的 属性 名 是 some-attr 而 不 是 some-property。 


<div my-directive 


some-attr="someProperty with @ binding"> 
</div> 











现在 ， 当 我 们 在 指令 模板 或 控制 器 中 (之 前 的 例子 这 样 做 过 ) 访问 someProperty 时 ， 
到 DOM 属 性 中 的 值 的 副本 : 


会 得 








template: ' «<div>\ 

we have access to {{ someProperty }}\ 

</div>', 

controller: function($scope) { 

// 指令 可 以 有 它 自己 的 控制 器 ， 在 那 种 情况 下 ,我 们 可 以 将 

// $scope.someProperty 设 置 成 "someProperty with @ binding" 
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回 到 主题 ， 我 们 用 属性 将 数据 从 DOM 中 复制 到 指令 的 隔离 作用 域 中 


<div my-directive 
my-url="http://google.com" 
my-link-text="Click me to go to Google"></div> 


angular.module( 'myApp', [|]) 
.directive( 'myDirective', function() { 
return { 


restrict: 'A', 
replace: true, 
scope: { 
myUrl: '@'，// 绑 定 策略 
myLinkText: '@' // 绑 定 策略 
上 
template: '《a href="{{myUrl1}}">' + 
'{{myLinkText}} «</a> 
]; 
}); 


联 在 线 示例 : http://jsbin.com/eloKoD1/1/edit。 











默认 情况 下 约定 DOM 属 性 和 JavaScript 中 对 象 忆 
的 是 驼峰 式 写 法 )。 

由 于 作用 域 中 属性 经 常 是 私有 的 ， 因 此 可 以 (虽然 不 常见 ) 指定 我 们 希望 将 这 个 内 部 属性 同 
哪个 DOM 属 性 进行 绑 定 : 


性 的 名 字 是 一 样 的 ( 除非 对 象 的 属性 名 采用 








| 








ol 





























scope: { 
myUrl: '@someAttr', 
myLinkText: '@' 

} 


上 面 的 隔离 作用 域 中 的 内 容 是 : 将 指令 的 私有 属性 $scope .myUrl 同 DOM 中 some-attr 属 性 
的 值 绑 定 起 来 。 这 个 值 既 可 以 是 硬 编码 的 也 可 以 是 当前 作用 域 (例如 Some-attr="{{expr- 
ession}} ) 中 某 个 表达 式 的 运算 结果 。 


在 DOM 中 要 用 some-attr 人 代替 my-ur1l : 

















《<div my-directive 
some-attr="http://google.com" 
my-link-text="Click me to go to Google" > 

«</div> 


更 进一步 ， 还 可 以 在 DOM 对 应 的 作用 域 上 运算 表达 式 ， 并 将 结果 传递 给 指令 ， 在 指令 内 部 
最 终 被 绑 定 在 属性 上 : 
《<div my-directive 


some-attr="{{ 'http://' + 'google.com' }}"> 
/jdiv> 


在 此 之 上 , 我 们 来 看 看 如 何 创 建 一 个 文本 输入 域 , 并 将 输入 值 同 指令 内 部 隔离 作用 域 的 属性 
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| 注意 在 输入 标签 上 使 用 了 内 置 指 令 ng-model 。 这 个 指令 可 以 将 输入 文本 同 
$scope 上 的 myUr1 属 性 进行 绑 定 。 


<input type="text" ng-model="myUr1l" /> 

<div my-directive 
some-attr="{{ myUrl }}" 
my-link-text="Click me to go to Google"> 
</div> 


这 段 代 码 是 可 以 工作 的 , 但 如 果 我 们 将 文本 输入 字段 移 到 指令 内 部 并 在 另 一 个 指令 中 进行 绑 
定 ， 就 无 法 正常 工作 了 : 


<div my-directivesome-attr="{{ myUrl }}" 
my-link-text="Click me to go to Google"> 
</div> 


还 有 下 面 这 段 代码 : 


template: '<div>\ 

<input type="text" ng-model="myUrl1l" />»\ 

<a href="{{myUr1}}">{{myLinkText}}</a>\ 

</div>"' 
通过 观察 Chrome 开 发 者 工具 中 的 href 可 以 知道 ， 我 们 并 没有 错误 地 将 内 部 $scope 的 属性 
myUr1l 同 外 部 的 DOM 属 性 some-attr 绑 定 在 一 起 。 值 是 通过 对 DOM 必 | 性 进行 复制 被 传递 到 隔离 作 


用 域 中 的 ， 难 道 它 不 应 该 同时 设置 同名 属性 的 值 吗 ? 如 图 8-7 所 示 。 



































http://google.com | Click meto go to Google 





x IlElements| Resources Network Sources Timeline Profiles 


v<html ee AE class="ng-scope"> 

bp <head>.</head> 

vebodys 
p<div my-directive snome-attr my-1ink-tPxt="rlick 
me 各 90 to Google">.</div> 
p<script>.</script> 
</body> 

</html> 


,= A hmlng-scope EE 
图 8-7 Chrome 开 发 者 工具 

出 现 这 种 现象 的 原因 是 , 内 置 指令 ng-model 在 它 自 对 内 部 的 隔离 作用 域 和 DOM 的 作用 域 ( 由 
控制 器 提供 ) 之 间 创 建 了 一 个 双向 数据 绑 定 。 

让 我 们 来 模仿 一 下 这 个 设置 过 程 以 使 例子 能 正 工 作 。 我 们 的 目标 是 理解 双向 数据 绑 定 , 以 及 
ng-mode1 在 这 个 过 程 中 的 行为 。 

双向 数据 绑 定 或 许 是 AngularJS 中 最 重要 且 无 法 通过 jQuery 简单 实现 的 功能 之 一 。 我 们 需要 自 
己 实 现 它 进 而 了 解 它 的 神奇 效果 ,幸好 ,所 需 工 作 并 不 多 。 接 下 来 在 我 们 的 隔离 作用 域 和 ng-model 
内 部 的 隔离 作用 域 之 间 创 建 一 个 双向 数据 绑 定 ， 这 样 我 们 的 例子 就 完整 了 。 将 内 部 的 
$scope.myur1 属 性 同 当前 控制 器 作用 域 中 的 theirur1 属 性 进行 绑 定 ， 在 DOM 中 通过 作用 域 查 询 
来 实现 这 个 绑 定 。 
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在 这 个 流程 中 , 给 两 个 方向 的 绑 定 都 添加 一 个 文本 输入 字段 。 通 过 这 两 个 输入 字段 可 以 方便 
地 观察 作用 域 是 如 何在 DOM 中 通过 原型 继承 链接 在 一 起 的 ”: 


<label>Their URL field:</label> 
<input type="text" ng-model="theirUr1l"> 
<div my-directive 
some-attr="theirUrl" 
my-link-text="Click me to go to Google"></div>» 
angular .module( 'myApp', [|]) 
.directive( 'myDirective', function() { 
return { 
restrict: 'A', 
replace: true, 
scope: { 
myUr1: '=someAttr'，// 经 过 了 修改 
myLinkText: '@' 





I 
template: '\ 
<dqiv>N 
<label>My Url1 Field:</label»\ 
<input type="text"\ 
ng-model="myUr1l" />»\ 
<a href="{{myUrl}}">{{myLinkText}}</a»\ 
</div>N 
二 
5 


在 线 示例 : http://jsbin.com/IteNita/1/edit。 


在 Chrome 开 发 者 工具 中 一 边 在 两 个 文本 输入 字段 中 输入 内 容 ， 一 边 审查 href 属 性 的 值 ， 如 
图 8-8 所 示 ， 酷 。 








Their URL field: Ihttp:/ /google.d 
My Unl Field: http://google.c Click me to go to Google 





x 上 so as oe ess Profiles 上 


MA Va | dirty" > 

<a href="http://google.c" class="ng— 

binding">Click me to go to Google</a> 
</div> 


EE Q | ningsore EE 

图 8-8 ”Chrome 开 发 者 工具 
除了 将 原来 的 文本 输入 字段 添加 回 主 HTML 文 档 外 ， 唯 一 的 修改 是 用 = 绑 定 策略 代 蔡 了 e@。 
总 地 来 说 ， 这 个 例子 展示 了 双向 数据 绑 定 的 神奇 效果 ， 它 是 AngularJS 的 主要 卖点 之 一 。 
了 解 内 部 指令 的 工作 原理 非常 重要 , 这 样 才能 在 同 自 定义 指令 一 起 使 用 时 把 它们 的 行为 考虑 在 内 。 
下 一 章 我 们 会 详细 介绍 AngularJS 的 内 置 指令 ， 以 便 了 解 如 何 使 用 它们 以 及 它们 存在 的 意义 。 
了 解 完 内 置 指令 ， 第 10 章 将 详细 介绍 创建 自 定 义 指 令 时 的 高 级 设置 。 


最 后 ,我 们 会 创建 自 定义 指令 ,然后 讨论 应 用 架构 ， 在 这 个 话题 中 自 定义 和 内 置 指令 都 非常 
重要 。 


e 


} 















































Q@ 这 个 描述 不 是 很 准确 ， 原 型 继承 的 机 制 应 该 是 在 AngularJS 的 JavaScript 代 码 中 而 非 DOM 中 实现 的 。 一 一 译 者 注 
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第 9 章 
内 置 指令 








AngularJS 提 供 了 一 系列 内 置 指令 。 其 中 一 些 指令 重 载 了 原生 的 HITML 元 素 ， 比 如 cform> 和 
“ay 标签 ， 当 在 HTML 中 使 用 标签 时 ， 并 不 一 定 能 明确 看 出 是 否 在 使 用 指令 。 

例如 ，“formy 标签 被 从 底层 扩展 了 一 系列 高 级 功能 ,包括 表单 验证 等 ,原生 HTML 表单 并 不 
会 提供 这 些 功 能 。 

其 他 内 置 指令 通常 以 ng 为 前 级 ， 很 容易 识别 。 例 如 后 面 将 介绍 的 ng-href 指 令 ， 它 会 提供 一 
个 超 链接 ， 这 个 链接 将 处 于 禁用 状态 ， 直 到 ng-href="someExpresiion" 中 的 表达 式 被 调用 并 | 
返回 一 个 值 。 

最 后 ， 某 些 内 置 指令 并 不 会 有 对 应 的 HTML 标 签 ， 比 如 ng-controller ， 这 个 指令 可 以 在 标 
签 的 属性 中 使 用 ， 通 常 在 包含 很 多 子 元 素 并 且 需 要 共享 作用 域 时 使 用 。 

注意 ， 所 有 以 ng 前 缀 开头 作为 命名 空间 的 指令 都 是 AngularJS 提 供 的 内 置 指令 ， 因 此 不 要 把 
你 自己 开发 的 指令 以 这 个 前 级 命名 。 


























到 














9.1 基础 ng 属性 指令 


首先 来 看 看 和 原生 HTML 标 签名 称 相似 的 一 组 内 置 指令 ,这 组 指令 非常 容易 记忆 ， 因 为 仅仅 
是 在 原生 标签 名 前 加 上 了 ng 前 级 ， 包 括 : 


DQ ng-href; 

DQ ng-src; 

D ng-disabled ; 
DQ ng-checked; 
DQ ng-readonly; 
DQ ng-selected; 


DQ ng-class; 





DQ ng-style。 


9.1.1 布尔 属性 
下 面 介绍 的 指令 将 帮助 我 们 更 简便 地 使 用 HTML 布 尔 属性 。 
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根据 HTML 标 准 的 定义 ”， WA 当 这 个 属性 出 现时 ,这 个 属 怕 
的 值 就 是 true (无论 实际 定义 的 值 是 什么 )。 如 果 未 出 现 ， 这 个 属性 的 值 就 是 false。 


当 在 AngularJS 中 使 用 动态 数据 绑 定 时 , 不 能 简单 地 将 这 个 属性 值 设置 为 ture 或 false， 因 为 
根据 标准 定义 只 4 有 当 这 个 属 。 出 现时 ， 它 的 值 才 为 false。 因 此 AngularJS 提 供 a 
前 级 版 本 的 布尔 属性 ， 通 过 运算 表达 式 的 值 来 决定 在 目标 元 素 上 是 插入 还 是 移 除 对 应 的 属性 。 


1. ng-disabled 
使 用 ng-disabled 可 以 把 disabled 属 性 绑 定 到 以 下 表单 输入 字段 上 : 


OD cinput> (text、 checkbox、 radio、 number、 url,email、 submit ); 














PT 





















































口 “textareay> ; 
口 selecty> ; 
口 “buttony> 。 


当 写 普通 的 HTML 输 入 字段 时 , 如 有 果 在 元 素 标签 上 出 现 了 disabled 属 性 就 会 禁用 这 个 输入 字 
段 。 通 过 ng-disabled 可 以 对 是 否 出 现 属性 进行 绑 定 。 例 如 ， 在 下 面 的 例子 中 按钮 会 一 直 禁 用 ， 
直到 用 户 在 文本 字段 中 输入 内 容 : 


<input type="text" ng-model="someProperty" placeholder="TypetoEtnable"> 
<button ng-model="button" ng-disabled="!someProperty">AButton</button> 


在 下 面 的 例子 , 文本 字段 会 被 禁用 五 秒 ， 直 到 在 $timeout 中 将 isDisabled 属 性 设置 为 true: 


< 七 extarea ng-disabled="isDisabled">Wait5seconds</textarea> 






































angular.module('myApp'， 门 ) 
.run(function($rootScope, $timeout) { 
$rootScope.isDisabled = true; 
$timeout(function() { 
$rootScope.isDisabled = false; 
},，50060); 
9 


两 个 例子 的 在 线 示例 : http:Vijsbin.comyiHiYItu/l/edit。 

2. ng-readonly 

同 其 他 布尔 属性 一 样 ，HTML 定 义 只 会 检查 readonly 属 性 是 否 出 现 ， 而 不 是 它 的 实际 值 。 
通过 ng-readonly 可 以 将 某 个 返回 真 或 假 的 表达 式 同 是 否 出 现 readonly 属 性 进行 绑 定 : 


Type here to make sibling readonly: 
<input type="text" ng-model="someProperty"><br/> 
<input type="text" 

ng-readonly="someProperty" 

value="Some text here"/> 











3.ng-checked 


标准 的 checked 属 性 是 一 个 布尔 属性 ,不 需要 进行 赋值 。 通过 ng-checked 将 某 个 表达 式 同 是 
否 出 现 checked 属 性 进行 绑 定 。 















































二 











GD http:/www.w3.org/html/wg/drafts/html/master/infrastructure.html#boolean-attribute 
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在 下 面 的 例子 中 , 我 们 通过 ng-init 指 令 将 someProperty 的 值 设 置 为 true。 将 some Property 
同 ng-checked 绑 定 在 一 起 ，AngularJS 会 输出 标准 的 HTML checked 属 性 ， 这 样 默 认 会 把 复 选 框 
勾 选 : 



































<1abel>someProperty = {{someProperty}}</1label> 

<input type="checkbox" 
ng-checked="someProperty” 
ng-init="someProperty = true" 
ng-model="someProperty"> 


下 面 的 例子 刚好 相反 : 


<label>someProperty = {{anotherProperty}}</1label> 

<input type="checkbox" 
ng-checked="anotherProperty" 
ng-init="anotherProperty = false" 
ng-model="anotherProperty"> 


注意 , 为 了 展示 , 这 里 用 ng-mode1l 把 someProperty 和 anotherProperty 的 值 绑 定 到 了 对 应 的 
<label> 标 签 里 。 


4. ng-selected 








ng-selected 可 以 对 是 否 出 现 option 标 签 的 selected 属 性 进行 绑 定 : 


<label>Select Two Fish:</label> 
<input type="checkbox" 
ng-model="isTwoFish"><br/> 
<select> 
<option>One Fishx</option> 
<option ng-selected="isTwoFish">Two Fishx</option> 
</select> 


在 线 示例 : http://jsbin.com/0QazOQE/2/edit。 


9.1.2 ”类 布尔 属性 


ng-href 、ng-src 等 属性 虽然 不 是 标准 的 HTML 布尔 属性 ， 但 是 由 于 行为 相似 ， 所 以 在 
AngularJS 源 码 内 部 是 和 布尔 属性 同等 对 竺 的， 下面 介绍 这 些 属 性 。 


ng-href 和 ng-src 都 能 有 效 帮 助 重 构 和 避免 错误 ， 因 此 在 改进 代码 时 强烈 建议 用 它们 代替 原 
来 的 href 和 src 属 性 。 



























































1. ng-hreft 
当 使 用 当前 作用 域 中 的 属性 动态 创建 URL 时 ， 应 该 用 ng-href 代 替 href。 


这 里 的 潜在 问题 是 当 用 户 点 击 一 个 由 插值 动态 生成 的 链接 时 ， 如果 插值 尚未 生效 , 将 会 跳 转 
到 错误 的 页 面 (通常 是 404 )。 


这 时 ， 如 果 使 用 ng-href ，AngularJS 会 等 到 搬 值 生效 ( 在 例子 中 是 两 秒 以 后 ) 后 再 执行 点 击 
链接 的 行为 : 
































<!1-- 当 href 包含 一 个 {{expression}} 时 总 是 使 用 ng-href --》> 
<a ng-href="{{ myHref }}">I'm feeling lucky, when I load</a> 
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<!-- 用 户 单 击 之 前 ，href 不 会 加 载 --> 
<a href="{{ myHref }}">I'm feeling 404</ay> 


将 插值 生效 的 事件 延迟 两 秒 ， 来 观察 实际 的 行为 : 





angular.module( 'myApp', [|]) 
.run(function($rootScope, $timeout) { 
$timeout(function() { 
$rootScope.myHref = 'http://goo0gle.com'; 
}，2000); 
})3 


在 线 示例 : http://jsbin.com/IgInopi/1/edit。 


2.ng-src 





AngularJS 会 告诉 浏览 器 在 ng-src 对 应 的 表达 式 生效 之 前 不 要 加 载 图 像 : 


<h1i>WrongWay </h1> 
<img src="{{imgSrc}}"/> 





<h1>Rightway</h1> 
<img ng-src="{{imgSrc}}"/> 


angular.module( 'myApp', [|]) 
.run(function($rootScope, $timeout) { 
$timeout(function() { 
$rootScope.imgSrc = 'https://www.google.com/images/srpr/1logoiiw.png’'; 
}，2000 ) ; 
下 





在 线 示 例 : http://jsbin.com/egucIqU/1l/edit。 


浏览 在 线 示 例 时 ， 通 过 Chrome 开 发 者 工具 的 网 络 面板 观察 资源 加 载 状况 ， 注 意 ， 其 中 一 个 
请 求 是 红色 的 ,说 明 发 生 了 错误 。 这 个 错误 是 由 于 Wrong way 中 我 们 用 src 代 替 了 ng-src 导 致 的 。 








9.2 在 指令 中 使 用 子 作用 域 


下 面 将 要 介绍 的 指令 会 以 父 级 作用 域 为 原型 生成 子 作 用 域 。 这 种 继承 的 机 制 可 以 创建 一 个 隔 
离 层 ， 用 来 将 需要 协同 工作 的 方法 和 数据 模型 对 象 放置 在 一 起 。 


ng-app 和 Ing-controller 是 特殊 的 指令 ， 因 为 它们 会 修改 区 套 在 它们 内 部 的 指令 的 作用 域 。 





ng-app 为 AngularJS 应 用 创建 $rootScope ，ng-controller 则 会 以 $rootScope 或 另外 一 个 
ng-controller 的 作用 域 为 原型 创建 新 的 子 作 用 域 。 


1. ng-app 

任何 具有 ng-app 属 性 的 DOM 元 素 将 被 标记 为 $rootScope 的 起 始点 。 
$rootScope 是 作用 域 链 的 起 始点 ， 任 何 舰 套 在 ng-app 内 的 指令 都 会 继承 它 。 
在 JavaScript 代 码 中 通过 run 方 法 来 访问 $rootScope。 




















<html ng-app="myApp"> 
<body> 
{{ someProperty }} 
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<button ng-click="someAction()"></button> 
</body> 
</html> 


angular .module( 'myApp', []) 
.run(function($rootScope) { 
$rootScope.someProperty = 'hello computer'; 
$rootScope.someAction = function() { 
$rootScope.someProperty = 'hello human ' ; 
} 
1 


在 线 示例 : http://jsbin.com/ICOzeF1/2/edit。 
这 里 为 了 演示 方便 ， 像 使 用 全 局 作用 域 一 样 使 用 $rootscope， 实 际 生产 中 不 建议 这 样 做 。 


可 以 在 整个 文档 中 只 使 用 一 次 ng-app。 如 果 需 要 在 一 个 页 面 中 放置 多 个 AngularJS 应 用 ， 需 
要 手动 引导 应 用 。 第 24 章 会 深入 讨论 手动 引导 应 用 。 














2. ng-controller 


内 置 指令 ng-controller 的 作用 是 为 租 套 在 其 中 的 指令 创建 一 个 子 作用 域 , 避免 将 所 有 操作 
和 模型 都 定义 在 $rootScope 上 。 用 这 个 指令 可 以 在 一 个 DOM 元 素 上 放置 控制 需 。 


ng-controller 接 受 一 个 参数 expression ， 这 个 参数 是 必需 的 。 














expression 人 参数 是 一 个 AngularJS 表 达 式 。 
子 $scope 只 是 一 个 JavaScript 对 象 ， 其 中 含有 从 父 级 $scope 中 通过 原型 继承 得 到 的 方法 和 
性 ， 包 括 应 用 的 $rootScope。 


骨 套 在 ng-controller 中 的 指令 有 访问 新 子 $scope 的 权限 , 但 是 要 牢记 每 个 指令 都 应 该 遵 
的 和 作用 域 相关 的 规则 。 


回想 一 下 ，$scope 对 象 的 职责 是 承载 DOM 中 指令 所 共享 的 操作 和 模型 。 

















al 


后 


有 

















由 

















Q、 操作 指 的 是 $scope 上 的 标准 JavaScript 方 法 。 


Q、 模型 指 的 是 $scope 上 保存 的 包含 瞬时 状态 数据 的 JavaScript 对 象 。 持久 化 状态 的 
数据 应 该 保存 到 服务 中 ， 服 务 的 作用 是 处 理 模 型 的 持久 化 。 


个 出 于 技术 和 架构 方面 的 原因 ， 绝 对 不 要 直接 将 控制 器 中 的 $scope 赋 值 为 值 类 型 
对 象 (字符 串 、 布 尔 值 或 数字 )。DOM 中 应 该 始终 通过 点 操作 符 . 来 访问 数据 。 
遵守 这 个 规则 将 使 你 远离 不 可 预期 的 麻烦 。 


2, 控制 器 应 该 尽 可 能 简单 。 虽 然 可 以 用 控制 器 来 组 织 所 有 功能 ， 但 是 将 业务 逻辑 
移 到 服务 和 指令 中 是 非常 好 的 主意 。 查 看 第 21 章 中 的 详细 内 容 。 
有 了 控制 器 ， 我 们 可 以 将 之 前 的 例子 改造 一 下 ， 把 数据 和 操作 放 到 子 作用 域 中 : 


<div ng-controller="SomeController"> 
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{{ someModel .someProperty }} 
<button ng-click="someAction()">Communicatex«/button> 


</div> 
angular.module('myApp'，[]) 
.controller('SomeController', function($scope) { 
// 创 建 模 型 
$scope.someModel = { 


// 添加 属性 
someProperty: 'hello computer' 
} 
// 设置 $scope 自 身 的 操作 
$scope.someAction = function() { 
$scope.someModel .someProperty = 'hello human'; 
二 
| 


在 线 示例 : http://jsbin.com/OYikipe/1/edit。 


注意 ， 这 个 例子 和 之 前 相 比 有 两 处 不 同 : 首先 ,我们 使 用 了 $rootscope 的 子 作用 域 ， 它 提 
供 了 一 个 干净 的 对 象 供 我 们 操作 。 使 用 子 作 用 域 意味 着 其 上 的 数据 模型 和 操作 在 应 用 的 其 他 地 方 
是 无 法 访问 的 ， 只 能 被 这 个 作用 域内 的 指令 及 其 子 作 用 域 访问 。 其次, 显 式 声明 了 数据 模型 ,我 
们 说 过 ,这 非常 重要 。 为 了 展示 这 为 什么 重要 ， 看 一 下 这 个 例子 的 变 体 。 这 个 例子 中 ,在 已 有 的 
控制 器 中 藤 套 了 第 二 个 控制 器 ， 并 且 没有 设置 模型 对 象 的 属性 : 


<qiv ng-controller="SomeController"> 
{{ someBareValue }} 
<button ng-click="someAction()">Communicate to childx</button> 
<div ng-controller="ChildController"> 
{{ someBareValue }} 
<button ng-click="childAction()">Communicate to parent</button> 
</div> 
/div% 

















angular.module( 'myApp', [|]) 
.controller('SomeController', function($scope) { 
// 反 模 式 ， 裸 值 
$scope.someBareValue = 'hello computer ' ; 
// 设置 $scope 本 身 的 操作 ， 这 样 没 问题 
$scope.someAction = function() { 
// 在 SomeController 和 ChildController 中 设置 {{ someBareValue }} 
$scope.someBareValue = 'hello human, from parent'; 
把 
}) 
.controller('ChildController', function($scope) { 
$scope.childAction = function() { 
// 在 ChildController 中 设置 {{ someBareValue }} 
$scope.someBareValue = 'hello human, from child'; 
} 
1 


在 线 示例 : http://jsbin.com/UbIRIHa/1/。 

由 于 原型 继承 的 关系 ,修改 父 级 对 象 中 的 someBareValue 会 同时 修改 子 对 象 中 的 值 ， 但 反之 
则 不 行 。 

可 以 看 下 这 个 例子 的 实际 效果 ， 首 先 点 击 child button， 然后 点 击 parent button。 这 个 例子 充分 
说 明了 子 控制 需 是 复制 而 非 引 用 someBarevalue。 
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JavaScript 对 象 要 么 是 值 复制 要 么 是 引用 复制 。 字 符 串 、 数 字 和 布尔 型 变量 是 值 
复制 。 数 组 、 对 象 和 函数 则 是 引用 复制 。 














如 果 将 模型 对 象 的 茶 个 属性 设置 为 字符 串 , 它 会 通过 引用 进行 共享 , 因此 在 子 $scope 中 修改 
属性 也 会 修改 父 $scope 中 的 这 个 属性 。 下 面 的 例子 展示 了 正确 的 做 法 : 




















<div ng-controller="SomeController"> 
{{ someModel .someValue }} 
<button ng-click="someAction()">Communicate to child</button> 
<div ng-controller="ChildController"> 
{{ someModel .someValue }} 
<button ng-click="childAction()">Communicate to parent</button> 
</div> 
</div> 


angular .module( 'myApp', []) 
.controller('SomeController', function($scope) { 
// 最 佳 实践 ， 永 远 使 用 一 个 模式 
$scope.someModel = { 
someValue: 'hello computer' 


} 
$scope.someAction = function() { 

$scope.someModel .someValue = 'hello human, from parent'; 
}; 


}) 
.controller('ChildController', function($scope) { 
$scope.childAction = function() { 
$scope.someModel .someValue = 'hello human, from child'; 
拓 
}); 


在 线 示例 : http://jsbin.com/aflyeda/1/edit。 

无 论点 击 哪 个 按钮 ， 值 都 会 进行 同步 修改 。 

注意 虽然 这 个 特性 是 使 用 ng-control ler 时 最 重要 的 特性 之 一 y» 但 在 使 用 任何 会 创建 子 作 
用 域 的 指令 时 ， 如 果 将 指令 定义 中 的 scope 设 置 为 true ， 这 个 特性 也 会 带 来 负面 影响 。 下 面 的 内 
置 指令 都 有 同样 的 特性 : 


D ng-include 





DQ ng-switch 

口 ng-Trepeat 

DQ ng-view 

DQ ng-controller 
DQ ng-if 





3. ng-include 


使 用 ng-include 可 以 加 载 、 编 译 并 包含 外 部 HTML 片段 到 当前 的 应 用 中 。 模板 的 URL 被 限制 
在 与 应 用 文档 相同 的 域 和 协议 下 ， 可 以 通过 白 名 单 或 包装 成 被 信任 的 值 来 突破 限制 。 更 进一步 ， 
需要 考虑 跨 域 资源 共享 ( Cross-Origin Resource Sharing，CORS ) 和 同 源 规则 ( Same Origin Policy ) 
来 确保 模板 可 以 在 任何 浏览 器 中 正常 加 载 。 例 如 ,所 有 浏览 器 都 不 能 进行 跨 域 的 请 求 ， 部 分 浏览 
需 也 不 能 访问 file:/ 协 议 的 资源 。 
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Q、 在 开发 中 ， 可 以 通过 命令 行 命令 chrome --allow-file-access-from-files 来 
禁止 CORS 错 误 。 只 在 紧急 情况 下 使 用 这 个 方法 ， 比 如 你 的 老板 正 站 在 你 身后 ， 
并 且 所 有 事情 都 无 法 正常 工作 。 


在 同一 个 元 素 上 添加 onload 属 性 可 以 在 模板 加 载 完成 后 执行 一 个 表达 式 。 


要 记 住 ， 使 用 ng-include 时 AngularJS 会 自动 创建 一 个 子 作 用 域 。 如 果 你 想 使 用 某 个 特定 的 作 
用 域 , 例如 controllerA 的 作用 域 , 必须 在 同一 个 DOM 元 素 上 添加 ng-controller ="ControllerA" 
指令 , 这 样 当 模板 加 载 完成 后 ,不 会 像 往常 一 样 从 外 部 作用 域 继承 并 创建 一 个 新 的 子 作 用 域 。 下 
面 看 一 个 例子 : 


<dqiv ng-include="/myTemplateName.html" 
ng-controller="MyController" 
ng-init="name = 'World'"> 
Hello {{ name }} 
</divy 





4. ng-switch 





这 个 指令 和 ng-switch-when 及 on="propertyName" 一 起 使 用 ， 可 以 在 propertyName 发 生变 
化 时 泻 染 不 同 指令 到 视图 中 。 在 下 面 的 例子 中 ， 当 person .name 是 Ari 时 ， 文 本 域 下 面 的 div 会 显 
示 出 来 ， 并 且 这 个 人 会 获得 胜利 ; 





<input type="text" ng-model="person.name"/> 
《<div ng-switch on="person.name"> 

<p ng-switch-default>And the winner is</py> 

<h1i ng-switch-when="Ari">{{ person.name }}</hi> 
</div> 


注意 ， 在 switch 被 调用 之 前 我 们 用 ng-switch-default 来 输出 默认 值 。 
在 线 示 例 : http://jsbin.com/AVihUdi/2/。 





5. ng-view 


ng-view 指 令 用 来 设置 将 被 路 由 管理 和 放置 在 HTML 中 的 视图 的 位 置 。 第 12 章 会 深入 研究 这 
些 内 容 。 


查看 第 12 章 获得 更 详细 信息 。 





6. ng-if 
使 用 ng-if 指 令 可 以 完全 根据 表达 式 的 值 在 DOM 中 生成 或 移 除 一 个 元 素 。 如 果 赋 值 给 ng-if 


的 表达 式 的 值 是 false， 那 对 应 的 元 素 将 会 从 DOM 中 移 除 ,否则 对 应 元 素 的 一 个 克隆 将 被 重新 插 
入 DOM 中 。 














ng-if 同 no-show 和 ng-hide 指 令 最 本 质 的 区 别 是 ， 它 不 是 通过 CSS 显 示 或 隐藏 DOM 节 点 ， 而 
是 真正 生成 或 移 除 节 点 。 


当 一 个 元 素 被 ng-if 从 DOM 中 移 除 , 同 它 关联 的 作用 域 也 会 被 销毁 。 而且 当 它 重新 加 入 DOM 
中 时 ， 会 通过 原型 继承 从 它 的 父 作 用 域 生成 一 个 新 的 作用 域 。 


同时 有 一 个 重要 的 细节 需要 知道 ,ngIf 重 新 创建 元 素 时 用 的 是 它们 编译 后 的 状态 。 如 果 ng-if 
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内 部 的 代码 加 载 之 后 被 jQuery 修改 过 ( 例如 用 .addclass )， 那 么 当 ng-if 的 表达 式 值 为 false 时 ， 
这 个 DOM 元 素 会 被 移 除 ， 表 达 式 再 次 成 为 true 时 这 个 元 素 及 其 内 部 的 子 元 素 会 被 重新 插入 
DOM， 此 时 这 些 元 素 的 状态 会 是 它们 的 原始 状态 ， 而 不 是 它们 上 次 被 移 除 时 的 状态 。 也 就 是 说 
无 论 用 jQuery 的 .adqdclass 添 加 了 什么 类 都 不 会 存在 了 。 


<div ng-if="2+2===5"> 
Won't see this DOM node, not even in the source code 
</div> 





























<div ng-if="2+2===4"> 
Hi, I do exist 
</div> 


在 线 示例 : http://jsbin.com/ezEcamo/1/。 


7. ng-Tepeat 
ng-repeat 用 来 遍历 一 个 集合 或 为 集合 中 的 每 个 元 素 生 成 一 个 模板 实例 。 集 合 中 的 每 个 元 素 
都 会 被 赋予 自己 的 模板 和 作用 域 。 同 时 每 个 模板 实例 的 作用 域 中 都 会 暴露 一 些 特殊 的 属性 。 


口 $index: 遍历 的 进度 (0...1ength-1 )。 

口 $first: 当 元 素 是 遍历 的 第 一 个 时 值 为 true。 

口 $middle: 当 元 素 处 于 第 一 个 和 最 后 元 素 之 间 时 值 为 true。 
口 $1ast : 当 元 素 是 遍历 的 最 后 一 个 时 值 为 true。 

口 $even: 当 $index 值 是 偶数 时 值 为 true。 

口 $odd: 当 $index 值 是 奇数 时 值 为 true。 


下 面 的 例子 展示 了 如 何 用 $odd 和 $even 来 制作 一 个 红 蓝 相间 的 列表 。 记 住 ，JavaScript 中 数组 
的 索引 从 0 开始 ， 因 此 我 们 用 !$even 和 !$odd 来 将 $even 和 $oqd 的 布尔 值 反 转 。 


<U1 ng-controller="PeopleController"> 
<l1i ng-repeat="person in people" ng-class="{even: !$even, odd: !$o0dd}"> 
{{person.name}} lives in {{person.city}} 
</1i> 
</ul> 









































.odd { 
background-color: blue; 


} 
.even { 
background-color: red; 


} 


angular .module( 'myApp',[]) 
.Controller('PeopleController' ,function($scope) { 
$scope.people = [ 
{name: "Ari", city: "San Francisco"}, 
{name: "Erik", city: "Seattle"} 
ls 
}); 


在 线 示例 : http://jsbin.com/akuYUkey/1l/edit。 
8.ng-init 
ng-init 指 令 用 来 在 指令 被 调用 时 设置 内 部 作用 域 的 初始 状态 。 
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ng-in 计 最 常见 的 使 用 场景 是 : 在 类 似 本 节 的 例子 中 那样 ， 需 要 创建 小 的 示例 代码 的 时 候 。 
对 于 任何 需要 健壮 结构 的 场景 ， 请 在 控制 器 中 用 数据 模型 对 象 来 设置 状态 。 
《<div ng-init="greeting='Hello' ;person= World "> 


{{greeting}} {{person}} 
/div% 





在 线 示 例 : http://jsbin.com/OZENuhO/1/。 
9. {{ }} 


<div>{{name}}</div> 

{{ }} 语 法 是 AngularJS 内 置 的 模板 语法 ， 它 会 在 内 部 $scope 和 视图 之 间 创 建 绑 定 。 基 于 这 个 
绑 定 ， 只 要 $scope 发 生变 化 ， 视 图 就 会 随 之 自动 更 新 。 

事实 上 它 也 是 指令 ， 虽然 看 起 来 并 不 像 ， 实 际 上 它 是 ng-bind 的 简略 形式 ， 用 这 种 形式 不 需 
要 创建 新 的 元 素 ， 因 此 它 常 被 用 在 行内 文本 中 。 

注意 , 在 屏幕 可 视 的 区 域内 使 用 {{ 二 } 会 导致 页 面 加 载 时 未 泻 染 的 元 素 发 生 闪 烁 ,用 ng-binq 
可 以 避免 这 个 问题 。 

















<body ng-init="greeting='HelloWorld'"> 
{{ greeting }} 
</body> 
在 线 示例 : http:/jsbin.com/ODUxeho/l/edit。 
10. ng-bind 


尽管 可 以 在 视图 中 使 用 {{ }} 模 板 语 法 ( AngularJS 内 置 的 方式 )， 我 们 也 可 以 通过 ng-bind 
指令 实现 同样 的 行为 。 





<body ng-init="greeting='HelloWorld'"> 
<p ng-bind="greeting"></p> 
</body> 


在 线 示例 : http://jsbin.com/esihUJ/1/edit。 

HTML 加 载 含 有 {{ 人 语法 的 元 素 后 并 不 会 立刻 泻 染 它们 ， 导 致 未 泻 染 内 容 内 烁 (Flash of 
Unrendered Content，FOUC )。 我 可 以 用 ng-bind 将 内 容 同 元 素 绑 定 在 一 起 避免 FOUC。 内 容 会 被 
当 作 子 文 本 节点 泻 染 到 含有 ng-bind 指 令 的 元 素 内 。 








11. ng-cloak 
除 使 用 ng-bind 来 避免 未 泻 染 元 素 闪 烁 ， 还 可 以 在 含有 {{ }} 的 元 素 上 使 用 ng-cloak 指 令 : 
<body ng-init="greeting='HelloWorld'"> 
<p ng-cloak>{{ greeting }}</p> 
</body> 


ng-cloak 指 令 会 将 内 部 元 素 隐 藏 ， 直 到 路 由 调用 对 应 的 页 面 时 才 显 示 出 来 。 
在 线 示例 : http:/jsbin.com/AJEboLO/Ledit。 
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12. ng-bind-template 
同 ng-bind 指 令 类 似 ，ng-bind-template 用 来 在 视图 中 绑 定 多 个 表达 式 。 
<div 


ng-bind-template="{{message}}{{name}}"> 
</div> 


13. ng-model 


ng-mode1l 指 令 用 来 将 input 、select 、text area 或 自 定义 表单 控件 同 包含 它们 的 作用 域 中 
的 属性 进行 绑 定 。 它 可 以 提供 并 处 理 表 单 验证 功能 ， 在 元 素 上 设置 相关 的 CSS 类 ( ng-valid、 
ng-inval id 等 )， 并 负责 在 父 表单 中 注册 控件 。 

它 将 当前 作用 域 中 运算 表达 式 的 值 同 给 定 的 元 素 进行 绑 定 。 如 果 属 性 并 不 存在 , 它 会 隐 式 创 
建 并 将 其 添加 到 当前 作用 域 中 。 

我 们 应 该 始终 用 ngMode1l 来 绑 定 $scope 上 一 个 数据 模型 内 的 属性 ， 而 不 是 $scope 上 的 属性 ， 
这 可 以 避免 在 作用 域 或 后 代 作 用 域 中 发 生 属 性 覆盖 。 


例如 : 


<input type="text" 
ng-model="modelName .someProperty" /> 


上 面 的 例子 展示 了 如 何 正 确 地 考虑 和 使 用 ngMode1 。 









































14. ng-show/ng-hide 


ng-show 和 ng-hide 根 据 所 给 表达 式 的 值 来 显示 或 隐藏 HTML 元 素 。 当 赋值 给 ng-show 指 令 的 
值 为 false 时 元 素 会 被 隐藏 。 类 似 地 ， 当 赋值 给 ng-hide 指 令 的 值 为 true 时 元 素 也 会 被 隐藏 。 


元 素 的 显示 或 隐藏 是 通过 移 除 或 添加 ng-hide 这 个 CSS 类 来 实现 的 。.ng-hide 类 被 预先 定义 
在 了 AngularJS 的 CSS 文 件 中 ， 并 且 它 的 display 属 性 的 值 为 none (用 了 1!important 标 记 )。 


<div ng-show="2 + 2 == 5"> 
2+2 isn't 5, don't show 

</div> 

<div ng-show="2 + 2 == 4"> 
2+2 is 4, do show 

</div> 

<div ng-hide="2 + 2 == 5"> 
2+2 isn't 5, don't hide 

</div> 








<div ng-hide="2 + 2 == 4"> 
2+2 is 4, do hide 
</div> 
在 线 示 例 : http://jsbin.com/ihOkagE/1/。 
15. ng-change 
这 个 指令 会 在 表单 输入 发 生变 化 时 计算 给 定 表 达 式 的 值 。 因 为 要 处 理 表单 输入 , 这 个 指令 要 
和 ngMode1 联 合 起 来 使 用 。 


<div ng-controller="EquationController"> 
<input type="text" 
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ng-model="equation.x" 
ng-change="change()" /> 
<code>{{ equation.output }}¢/code> 
/div% 


angular .module( 'myApp',{[]) 
.controller('EquationController', function($scope) { 
$scope.equation = {}; 
$scope.change = function() { 
$scope.equation.output 
= parseInt($scope.equation.x) + 2; 
DS 


在 线 示例 : http://jsbin.com/onUXuxO/1/edit。 


上 面 的 例子 中 ， 只 要 文本 输入 字段 中 的 内 容 发 生 了 变化 就 会 改变 equation.x 的 值 ， 进 而 运 
行 change( ) 函数 。 





16. ng-form 


ng-form 用 来 在 一 个 表单 内 部 舱 套 男 一 个 表单 。 普 通 的 HTML “formy 标 签 不 允许 能 套 ， 但 
ng-form 可 以 。 

这 意味 着 内 部 所 有 的 子 表单 都 合法 时 ， 外 部 的 表单 才 会 合法 。 这 对 于 用 ng-repeat 动 态 创建 
表单 是 非常 有 用 的 。 

由 于 不 能 通过 字符 插值 来 给 输入 元 素 动态 地 生成 name 属 性 ， 所 以 需要 将 ng-form 指 令 内 每 组 
重复 的 输入 字段 都 包含 在 一 个 外 部 表单 元 素 内 。 

下 面 的 CSS 类 会 根据 表单 的 验证 状态 自动 设置 : 
口 表单 合法 时 设置 ng-valid; 
口 表单 不 合法 时 设置 ng-invlid; 
口 表单 未 进行 修改 时 设置 hg-pristion; 
口 表单 进行 过 修改 时 设置 hg-dirty。 

Angular 不 会 将 表单 提交 到 服务 器 ， 除 非 它 指定 了 action 属 性 。 要 指定 提交 表单 时 调用 哪个 
JavaScript 方 法 ， 使 用 下 面 两 个 指令 中 的 一 个 。 
口 ng-submit : 在 表单 元 素 上 使 用 。 
D ng-click: 在 第 一 个 按钮 或 submit 类 型 (input [type=submit] ) 的 输入 字段 上 使 用 。 

为 了 避免 处 理 程序 被 多 次 调用 ， 只 使 用 下 面 两 个 指令 中 的 一 个 。 

下 面 的 例子 展示 了 如 何 通过 服务 器 返回 的 JSON 数 据 动态 生成 一 个 表单 。 我 们 用 ng-1loop 来 遍 
历 从 服务 器 取 回 的 所 有 数据 。 由 于 不 能 动态 生成 name 属 性 , 而 我 们 又 需要 这 个 属性 做 验证 ， 所 以 
在 循环 的 过 程 中 会 为 每 一 个 字段 都 生成 一 个 新 表单 。 

由 于 AngularJS 中 用 来 取代 <form> 的 ng-form 指 令 可 以 般 套 , 并 且 外 部 表单 在 所 有 子 表单 都 合 
法 之 前 一 直人 处 于 不 合法 状态 ， 因 此 我 们 可 以 在 动态 生成 子 表单 的 同时 使 用 表单 验证 功能 。 是 的 ， 
鱼 和 熊 掌 可 以 兼 得 。 


下 面 移 看 一 下 我 们 便 编 码 的 JSON 数 据 ， 把 它 假设 成 是 从 服务 器 返回 的 : 
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angular .module( 'myApp',[]) 
.Controller('FormController', function($scope) { 
$scope.fields = [ 
{placeholder: 'Username', isRequired: true}, 
{placeholder: 'Password', isRequired: true}, 
{placeholder: 'Email (optional)', isRequired: false} 


I 


$scope.submitForm = function() { 
alert("it works!"); 
3 
}); 


下 面 用 这 些 数据 生成 一 个 有 验证 功能 的 动态 表单 : 


<form name="signup_form" 
ng-controller="FormController" 
ng-submit="submitForm()" novalidate> 
<div ng-repeat="field in fields" 
ng-form="signup_form_input"> 
<input type="text" 
name="dynamic_input" 
ng-required="field.isRequired" 
ng-model="field.name" 
placeholder="{{field.placeholder}}" /> 


《<div 
ng-show="signup_form_input.dynamic_input.$dirty && 
signup_form_input.dynamic_input.$invalid"> 
<Span class="error" 

ng-show="signup_form_input.dynamic_input.$error.required"> 
The field is required. 
</span> 
</div> 
</div> 


<button type="submit" 
ng-disabled="signup_form.$invalid"> 
Submit All 
</button> 
</ form> 
input .ng-invalid { 
border: 1px solid red; 


} 


input.ng-valid { 
border: 1px solid green; 


} 
在 线 示例 : http://jsbin.com/UduNeCA/l/edit。 


17. ng-click 
ng-click 用 来 指定 一 个 元 素 被 点 击 时 调用 的 方法 或 表达 式 。 


<div ng-controller="CounterController"> 
<button ng-click="count = count + 1" 
ng-init="count=0"> 
Increment 
</button> 
count: {{ count }} 
<button ng-click="decrement()"> 
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Decrement 
</button> 
<div> 


angular .module( 'myApp',{[]) 
.controller('CounterController', function($scope) { 
$scope.decrement = function() { 
$scope.count = $scope.count - 1; 


}; 
}) 


在 线 示 例 : http://jsbin.com/uGipUBU/2/edit。 
18. ng-select 


ng-select 用 来 将 数据 同 HTML 的 selecty> 元 素 进行 绑 定 。 这 个 指令 可 以 和 ng-modqel 以 及 
ng-options 指 令 一 同 使 用 ， 构 建 精 细 且 表现 优良 的 动态 表单 。 


ng-options 的 值 可 以 是 一 个 内 涵 表达 式 (comprehension expression )， 其 实 这 只 是 一 种 有 趣 
的 说 法 ， 简 单 来 说 就 是 它 可 以 接受 一 个 数组 或 对 象 ， 并 对 它们 进行 循环 ， 将 内 部 的 内 容 提 供给 
select 标 签 内 部 的 选项 。 它 可 以 是 下 面 两 种 形式 。 
口 数组 作为 数据 源 : 
@ 用 数组 中 的 值 做 标签 ; 
@ 用 数组 中 的 值 作 为 选中 的 标签 ; 
用 数组 中 的 值 做 标签 组 ; 
@ 用 数组 中 的 值 作为 选中 的 标签 组 。 
口 对 象 作为 数据 源 : 
@ 用 对 象 的 键 - 值 (key-value ) 做 标签 ; 
@ 用 对 象 的 键 - 值 作 为 选中 的 标签 ; 
@ 用 对 象 的 键 - 值 作为 标签 组 ; 
昌 用 对 象 的 键 - 值 作 为 选中 的 标签 组 。 
下 面 看 一 个 ng-select 指 令 的 实例 : 














《<div ng-controller="CityController"> 
“<select ng-model="city" 
ng-options="city.name for city in cities"> 
<option value="">Choose City¢/option> 
</select> 
Best City: {{ city.name }} 
/div% 


angular .module( 'myApp',[]) 

.controller('CityController', function($scope) { 
$scope.cities = [ 

{name: 'Seattle'}, 

{name: 'San Francisco'}, 

{name: 'Chicago'}, 

{name: 'New York'}, 

{name: 'Boston'} 

I 

}); 
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在 线 示 例 : http:/Wjsbin.conyiQelOxi/l/edit。 


19. ng-submit 
ng-submit 用 来 将 表达 式 同 onsubmit 事 件 进 行 绑 定 。 这 个 指令 同时 会 阻止 默认 行为 (发 送 请 
求 并 重新 加 载 页 面 )， 除 非 表单 不 含有 action 属 性 。 


<form ng-submit="submit()" 
ng-controller="FormController"> 
Enter text and hit enter: 
<input type="text" 
ng-model="person.name" 
name="person.name" /> 
<input type="submit" 
name="person.name" 
value="Submit" /> 
<code>people={ {people}}</code> 
<ul ng-repeat="(index, object) in people"> 
<li>{{ object.name }}¢/1i> 
</ul> 
</ form> 





angular .module( 'myApp',[]) 
.Controller('FormController', function($scope) { 


$scope.person = { 
name: null 
姑 
$scope.people = []; 
$scope.submit = function() { 
if ($scope.person.name) { 


$scope.people.push({name: $scope.person.name}); 
$scope.person.name = ''; 


}; 
} 7 


在 线 示例 : http://jsbin.com/ONIcAC/1/edit。 


20. ng-class 


使 用 ng-class 动态 设置 元 素 的 类 ， 方 法 是 绑 定 一 个 代表 所 有 需要 添加 的 类 的 表达 式 。 重 复 
的 类 不 会 添加 。 当 表达 式 发 生变 化 ， 先 前 添加 的 类 会 被 移 除 ， 新 类 会 被 添加 。 


下 面 的 例子 会 用 ng-class 在 一 个 随机 数 大 于 5 时 将 .red 类 添加 到 一 个 giv 上 : 





<div ng-controller="LotteryController"> 
<div ng-class="{red: x > 5}" 
ng-if="x > 5"> 
You won! 
«</div> 
<button ng-click="x = generateNumber()" 
ng-init="x = 0"> 
Draw Number 
</button> 
<p>Number is: {{ x }}</p> 
</div> 
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.red { 
background-color: red; 


} 


angular.module( 'myApp',[]) 
.controller('LotteryController', function($scope) { 
$scope.generateNumber = function() { 
return Math.floor((Math.random( )*10)+1); 


}; 
直人 


在 线 示例 : http://jsbin.com/IvEcUci/1/edit。 
21. ng-attr-(suffix) 


当 AngularJS 编 译 DOM 时 会 查找 花 括号 {{ some expression }} 内 的 表达 式 。 这 些 表达 式 会 
被 自动 注册 到 $watch 服 务 中 并 更 新 到 $dqigest 循 环 中 ， 成 为 它 的 一 部 分 : 


峭 





<-- _ updated when‘ someExpression. on the$scope 
is updated -=-》> 
<hi>Hello{{someExpression}}</h1> 


有 时 浏览 器 会 对 属性 会 进行 很 苛刻 的 限制 。SVG 就 是 一 个 例子 : 





<SVgy》 
<Circle cx="{{ cx }}"></circle> 
</svg> 


运行 上 面 的 代码 会 抛 出 一 个 错误 ， 指 出 我 们 有 一 个 非法 属性 。 可 以 用 ng-attr-cx 来 解决 这 
个 问题 。 注 意 ，cx 位 于 这 个 名 称 的 尾部 。 在 这 个 属性 中 ， 通 过 用 {{ }} 来 写 表达 式 ， 达 到 前 面 提 
到 的 目的 。 








<SVgy》 
<Circle ng-attr-cx="{{ cx }}"><circle> 
《</svg> 
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本 章 的 目标 是 全 面 介绍 指令 的 设置 选项 和 功能 ， 以 及 如 何 使 用 指令 来 打造 成 熟 的 客户 端 应 用 。 


10.1 指令 定义 
对 于 指令 ， 可 以 把 它 简 单 的 理解 成 在 特定 DOM 元 素 上 运行 的 函数 ， 指 令 可 以 扩展 这 个 元 素 
的 功能 。 


例如 ,ng-click 可 以 让 一 个 元 素 能 够 监听 cl ick 事 件 ， 并 在 接收 到 事件 的 时 候 执行 AngularJS 表 
达 式 。 正 是 指令 使 得 AngularJS 这 个 框架 变 得 强大 ， 并 且 正 如 所 见 ， 我们 可 以 自己 创造 新 的 指令 。 


AngularJS 应 用 的 模块 中 有 很 多 方法 可 以 使 用 ， 其 中 girective( ) 这 个 方法 是 用 来 定义 指令 的 : 








angular .module( 'myApp', [|]) 

.directive( 'myDirective', function ($timeout, UserDefinedService) { 
// 指令 定义 放 在 这 里 

1 


directive() 方法 可 以 接受 两 个 参数 : 

1. name 《字符 串 ) 

指令 的 名 字 ， 用 来 在 视图 中 引用 特定 的 指令 。 
2. factory_function 《函数 ) 


这 个 函数 返回 一 个 对 象 , 其 中 定义 了 指令 的 全 部 行为 。$compile 服 务 利 用 这 个 方法 返回 的 对 
象 ， 在 DOM 调 用 指令 时 来 构造 指令 的 行为 。 

angular.application('myApp'，[]) 

.directive('myDirective'，function() { 

// 一 个 指令 定义 对 象 
return { 

// 通过 设置 项 来 定义 指令 ， 在 这 里 进行 徐 写 
}; 

}); 

我 们 也 可 以 返回 一 个 函数 代替 对 象 来 定义 指令 , 但 是 像 上 面 的 例子 一 样 , 通过 对 象 来 定义 是 
最 佳 的 方式 。 当 返回 一 个 函数 时 ， 这 个 函数 通常 被 称 作 链 接 传递 〈postLink ) 函数 ， 利 用 它 我 们 
可 以 定义 指令 的 链接 (link ) 功能 。 由 于 返回 函数 而 不 是 对 象 会 限制 定义 指令 时 的 自由 度 ， 因 此 
只 在 构造 简单 的 指令 时 才 比 较 有 用 。 
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当 AngularJS 启 动 应 用 时 ， 它 会 把 第 一 个 参数 当 作 一 个 字符 串 ， 并 以 此 字符 串 为 名 来 注册 第 
二 个 参数 返回 的 对 象 。AngularJS 编 译 器 会 解析 主 HTML 的 DOM 中 的 元 素 、 属性、 注释 和 CSS 类 名 
中 使 用 了 这 个 名 字 的 地 方 , 并 在 这 些 地 方 引用 对 应 的 指令 。 当 它 找 到 某 个 已 知 的 指令 时 ， 就 会 在 
页 面 中 插入 指令 所 对 应 的 DOM 元 素 。 





可 








<qiv my=-directive></divy> 


| 为 了 避免 与 未 来 的 HTML 标 准 冲 突 ， 给 自 定义 的 指令 加 入 前 组 来 代表 自 定义 的 
命名 空间 。AngularJS 本 身 已 经 使 用 了 ng- 前 级 ， 所 以 可 以 选择 除 此 以 外 的 名 字 。 
在 例子 中 我 们 使 用 my- 前 组 ( 比如 my-derictive )。 


间 令 的 工厂 函数 只 会 在 编译 器 第 一 次 匹配 到 这 个 指令 时 调用 一 次 。 和 controller 函 数 类 似 ， 
我 们 通过 $injetor .invoke 来 调用 指令 的 工厂 函数 。 


当 AngularJS 在 DOM 中 遇 到 具名 的 指令 时 ， 会 去 匹配 已 经 注册 过 的 指令 ， 并 通过 名 字 在 注册 
过 的 对 象 中 查找 。 此 时 , 就 开始 了 一 个 指令 的 生命 周期 , 指令 的 生命 周期 开始 于 $compile 方 法 并 
结束 于 link 方 法 ， 在 本 章 后 面 的 内 容 中 我 们 会 详细 介绍 这 个 过 程 。 


下 面 ， 来 看 看 定义 一 个 指令 时 可 以 使 用 的 全 部 设置 选项 。 

















| 一 个 JavaScript 对 象 由 键 和 值 组 成 。 当 一 个 给 定 键 的 值 被 设置 为 一 个 字符 囊 、 布 
尔 值 、 数 字 、 数 组 或 对 象 时 ， 我 们 把 这 个 键 称 为 属性 。 当 把 键 设置 为 函数 时 ， 
我 们 把 它 叫 做 方法 。 


可 能 的 选项 如 下 所 示 ， 每 个 键 的 值 说 明了 可 以 将 这 个 属性 设置 为 何 种 类 型 或 者 什么 样 的 
函数 








angular.module( 'myApp', [|]) 
.directive( 'myDirective', function() { 
return { 


restrict: String, 

priority: Number, 

terminal: Boolean, 

template: String or Template Function: 

function(tElement, tAttrs) (...}, 

templateUrl: String, 

replace: Boolean or String, 

scope: Boolean or Object, 

transclude: Boolean, 

controller: String or 

function(scope, element, attrs, transclude, otherIinjectables) { ... }, 

controllerAs: String, 

require: String, 

ink: function(scope, iElement, iAttrs) { ... }, 

compile: // 返回 一 个 对 象 或 连接 函数 ， 如 下 所 示 : 
function(tElement, tAttrs, transclude) { 








return { 
pre: function(scope, iElement, iAttrs, controller) { ... }, 
post: function(scope, iElement, iAttrs, controller) { ... } 
} 
// 或 者 
return function postLink(...){ ...} 
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和 
3 


10.1.1 restrict (字符 串 ) 


restrict 是 一 个 可 选 的 参数 。 它 告诉 AngularJS 这 个 指令 在 DOM 中 可 以 何 种 形式 被 声明 。 默 
认 AngularJS 认 为 restrict 的 值 是 A， 即 以 属性 的 形式 来 进行 声明 。 

可 选 值 如 下 : 

E 元素) 


<my-directive></my-directive> 


A 属性， 默认 值 ) 





<div my-directive="expression"></div> 

C 《类 名 ) 

<div class="my-directive:expression;"></div> 

M 注释 ) 

<——directive:my-directive expression-——> 

这 些 选 项 可 以 单独 使 用 ， 也 可 以 混合 在 一 起 使 用 : 
angular.module('myDirective'，function(){ 


return { 
restrict: 'EA' // 输入 元 素 或 属性 








}; 
}); 


上 面 的 配置 可 以 同时 用 属性 或 注释 的 方式 来 声明 指令 : 
<-- 作为 一 个 属性 -> 


<div my-directive> </div> 
《< 一 或 者 作为 一 个 元 素 一 -> 


<my-directive></my-directive> 


属性 是 用 来 声明 指令 最 常用 的 方式 , 因为 它 能 在 包括 老 版 本 的 下 浏览 絮 在 内 的 所 有 浏览 右 中 
正常 工作 ， 并 且 不 需要 在 文档 头 部 注册 新 的 标签 。 更 多 内 容 请 查看 第 30 章 。 























尽量 避免 用 注释 方式 来 声明 属性 。 这 种 方式 最 初 被 用 来 声明 由 多 个 标签 组 成 的 

间 念 。 这 种 方法 在 某 些 情况 下 特别 有 用 ， 比 如 在 ctabley> 元 素 内 使 用 ng-repeat 
指令 ， 但 在 AngularJS 1.2 中 ng-repeat 可 以 通过 ng-repeat-start 和 
ng-repeat-end 来 更 优雅 地 满足 这 个 需求 ， 注 释 模式 就 没有 什么 用 武之 地 了 。 
如 果 你 对 此 很 好 奇 ， 可 以 通过 Chrome 开 发 者 工具 的 element 标 签 观察 一 下 使 用 
ng-repeat 时 被 隐 式 添加 的 注释 。 


元 素 方式 还 是 属性 方式 
在 页 面 中 通过 元 素 方式 创建 新 的 指令 可 以 将 一 些 功能 封装 在 元 素 内 部 。 例 如 ,如 果 我 们 想 要 
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做 一 个 时 钟 ( 忽略 对 老 版 本 下 浏览 絮 的 支持 )， 可 以 创建 一 个 clock 指 令 ， 然后 在 DOM 中 用 如 下 
代码 来 声明 : 

<my-clock></my-clock> 

这 样 做 可 以 告诉 指令 的 使 用 者 , 这 里 会 完整 包含 应 用 的 某 一 部 分 内 容 。 这 个 时 钟 并 不 是 对 一 
个 既 有 时 钟 的 修饰 或 扩展 ， 而 是 一 个 全 新 的 单元 。 尽 管 这 里 也 可 以 使 用 属性 形式 声明 指令 
( AngularJS 并 不 在 意 )， 但 我 们 选择 了 元 素 形 式 ， 因 为 这 样 可 以 更 明确 地 表达 意图 。 

用 属性 形式 来 给 一 个 已 经 存在 的 元 素 添 加 数据 或 行为 -以 时 钟 为 例 ,假设 我 们 更 喜欢 模拟 时 钟 

<my-clock clock-display="analog"> </my-clock> 

如 何 进行 选择 ， 通 常 取 决 于 定义 的 指令 是 否 包含 某 个 组 件 的 核心 行为 ， 或 者 用 额外 的 行为 、 
状态 或 者 其 他 内 容 ( 比如 模拟 时 钟 ) 对 某 个 核心 组 件 进行 修饰 或 扩展 。 

使 用 何 种 指令 声明 格式 的 指导 原则 是 能 够 准确 表达 每 一 段 代码 的 意图 , 创造 易于 理解 和 分 享 
的 清晰 代码 。 

另外 一 个 重要 的 标准 , 是 根据 指令 是 否 创建 、 继承 或 将 自己 从 所 属 的 环境 中 隔离 出 去 进行 判 
汤 。 指令 的 父子 关系 对 其 组 成 和 重用 性 起 着 至 关 重 要 的 作用 , 会 有 额外 的 内 容 来 更 加 深入 地 讨论 
昌 令 的 作用 域 。 









































10.1.2 ”优先 级 (数值 型 ) 

优先 级 参数 可 以 被 设置 为 一 个 数值 。 大 多 数 指令 会 忽略 这 个 参数 ， 使 用 默认 值 0， 但 也 有 些 
场景 设置 高 优先 级 是 非常 重要 甚至 是 必须 的 。 例 如 , ngRepeat 将 这 个 参数 设置 为 1000, 这 样 就 可 
以 保证 在 同一 元 素 上 ， 它 总 是 在 其 他 指令 之 前 被 调用 。 

如 果 一 个 元 素 上 具有 两 个 优先 级 相同 的 指令 , 声明 在 前 面 的 那个 会 被 优先 调用 。 如 果 其 中 一 
个 的 优先 级 更 高 , 则 不 管 声明 的 顺序 如 何 都 会 被 优先 调用 : 具有 更 高 优先 级 的 指令 总 是 优先 运行 。 








OO ngRepeat 是 所 有 内 置 指令 中 优先 级 最 高 的 ， 它 总 是 在 其 他 指令 之 前 运行 。 这 样 
设置 主要 考虑 的 是 性 能 。 在 讨论 编译 参数 时 会 更 详细 介绍 性 能 相关 的 内 容 。 


10.1.3 terminal (布尔 型 ) 

terminal 是 一 个 布尔 型 参数 ， 可 以 被 设置 为 true 或 false。 

这 个 参数 用 来 告诉 AngularJS 停 止 运 行当 前 元 素 上 比 本 指令 优先 级 低 的 指令 。 但 同 当 前 指令 
优先 级 相同 的 指令 还 是 会 被 执行 。 

如 果 元 素 上 某 个 指令 设置 了 terminal 参 数 并 具有 较 高 的 优先 级 ,就 不 要 再 用 其 他 低 优 先 级 的 
指令 对 其 进行 修饰 了 ， 因 为 不 会 被 调用 。 但 是 具有 相同 优先 级 的 指令 还 是 会 被 继续 调用 。 


使 用 了 terminal 参 数 的 例子 是 ngview 和 ngIf。ngIE 的 优先 级 略 高 于 ngview， 如 果 ngIE 的 表 
达 式 值 为 true ，ngview 就 可 以 被 正常 执行 ,但 如 果 ngIf 表 达 式 的 值 为 false， 由 于 ngview 的 优先 
级 较 低 就 不 会 被 执行 。 
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10.1.4 template 《字符 串 或 函数 ) 
template 参 数 是 可 选 的 ， 必 须 被 设置 为 以 下 两 种 形式 之 一 : 

口 一 段 HTML 文 本 ; 

口 一 个 可 以 接受 两 个 参数 的 函数 ， 人 参数 为 tElement 和 tAttrs， 并 返回 一 个 代表 模板 的 字符 
串 。tElement 和 tAttrs 中 的 t 代 表 template， 是 相对 于 instance 的 。 在 讨论 链接 和 编译 
设置 时 会 详细 介绍 ， 模 板 元 素 或 属性 与 实例 元 素 或 属性 之 间 的 区 别 。 

AngularJS 会 同 处理 HTML 一 样 处 理 模板 字符 串 。 模 板 中 可 以 通过 大 括号 标记 来 访问 作用 域 ， 
例如 {{ expression }}。 
如 果 模 板 字符 串 中 含有 多 个 DOM 元 素 ， 或 者 只 由 一 个 单独 的 文本 节点 构成 ， 那 它 必 须 被 包 

含 在 一 个 父 元 素 内 。 换 句 话 说， 必须 存在 一 个 根 DOM 元 素 : 


















































template: '\ 
<div> <-—- Single root element —->\ 
<a href="http://google.com">Click mex</a>»\ 
<h1>When using two elements, wrap them in a parent element</h1i>\ 
《</div> \ 
另外 ， 注 意 每 一 行 末尾 的 反 斜 线 ， 这 样 AngularJS 才 能 正确 解析 多 行 字符 串 。 在 实际 生产 中 ， 
更 好 的 选择 是 使 用 emplateUr1 参 数 引 用 外 部 模板 ， 因 为 多 行文 本 阅读 和 维护 起 来 都 是 一 场 亚 梦 。 


模板 字符 串 和 templateURL 中 最 需要 了 解 的 重要 功能 ， 是 它们 如 何 同 作用 域 链接 起 来 。 第 8 
章 讨论 了 作用 域 是 如 何 传递 给 指令 的 。 
































10.1.5 templateUrl (字符 串 或 函数 ) 

templateUr1 是 可 选 的 参数 ， 可 以 是 以 下 类 型 : 
口 一 个 代表 外 部 HTML 文件 路 径 的 字符 串 ; 
口 一 个 可 以 接受 两 个 参数 的 函数 ， 参 数 为 tElement 和 tAttrs ， 并 返回 一 个 外 部 HTML 文 件 

路 径 的 字符 串 。 

无 论 哪 种 方式 ， 模板 的 URL 都 将 通过 AngularJS 内 置 的 安全 层 ， 特 别 是 $getTrusted 
ResourceUr1l， 这 样 可 以 保护 模板 不 会 被 不 信任 的 源 加 载 。 
默认 情况 下 ， 调 用 指令 时 会 在 后 台 通 过 Ajax 来 请 求 HTML 模板 文件 。 有 两 件 事 情 需要 知道 。 
口 在 本 地 开发 时 ,需要 在 后 台 运 行 一 个 本 地 服务 器 , 用 以 从 文件 系统 加 载 HTML 模 板 ， 否则 
会 导致 Cross Origin Request Script ( CORS ) 错误 。 
口 模板 加 载 是 异步 的 ， 意 味 着 编译 和 链接 要 暂停 ， 等 待 模 板 加 载 完成 。 
通过 Ajax 异步 加 载 大 量 的 模板 将 严重 拖 慢 一 个 客户 端 应 用 的 速度 。 为 了 避免 延迟 ,可 以 在 部 
署 应 用 之 前 对 HTML 模 板 进 行 缓存 。 在 大 多 数 场景 下 缓存 都 是 一 个 非常 好 的 选择 , 因为 AngularJS 
通过 减少 请 求 数量 提升 了 性 能 。 更 多 关于 缓存 的 内 容 请 查看 第 28 章 。 

模板 加 载 后 ，AngularJS 会 将 它 默 认 组 存 到 $templateCcache 服 务 中 。 在 实际 生产 中 ， 可 以 提 
前 将 模板 缓存 到 一 个 定义 模板 的 JavaScript 文 件 中 ， 这 样 就 不 需要 通过 XHR 来 加 载 模板 了 。 更 多 
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10.1.6 replace (布尔 型 ) 


replace 是 一 个 可 选 参数 ， 如 果 设 置 了 这 个 参数 ， 值 必须 为 true ， 因 为 默认 值 为 false。 默 
认 值 意味 着 模板 会 被 当 作 子 元 素 插入 到 调用 此 指令 的 元 素 内 部 : 


<div some-directive> </div> 
.directive('someDirective', function() { 
return { 
template: '<div>some stuff here<div>' 











}; 
}); 


调用 指令 之 后 的 结果 如 下 ( 这 是 默认 replace 为 false 时 的 情况 ): 








《<div some-directive> 
<div>some stuff herex<div> 
</div> 


如 果 replace 被 设置 为 了 true : 


.directive('someDirective', function() { 
return { 
replace: true // 修饰 过 
template: '<div>some stuff herex<div>' 
}; 
})s 


昌 令 调用 后 的 结果 将 是 : 








<div>some stuff herex<div> 


10.2 ”指令 作用 域 


为 了 完全 理解 指令 定义 对 象 中 剩 下 的 参数 ， 需 要 先 介绍 指令 作用 域 是 如 何 工作 的 。 
$rootScope 这 个 特殊 的 对 象 会 在 DOM 中 声明 ng-app 时 被 创建 : 





《<div ng-app="myApp" 
ng-init="someProperty = 'some data'"></div> 
《<div ng-init="siblingProperty = 'more data'"> 
Inside Div Two 
<div ng-init="aThirdProperty"></div> 
</div> 


上 面 的 代码 中 ,我 们 在 应 用 的 根 作 用 域 中 设置 了 三 个 属性 :someProperty .siblingProperty 
和 anotherSiblingProperty。 

从 这 里 开始 ，DOM 中 每 个 指令 调用 时 都 可 能 会 : 
口 直接 调用 相同 的 作用 域 对 象 ; 


口 从 当前 作用 域 对 象 继 承 一 个 新 的 作用 域 对 象 ; 
口 创建 一 个 同 当前 作用 域 相隔 离 的 作用 域 对 象 。 
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上 面 的 列子 展示 的 是 第 一 种 情况 ,前 两 个 div 是 兄弟 元 素 , 可 以 通过 get 和 set 访 问 $rootScope。 
第 二 个 div 内 部 的 div 同 样 可 以 通过 get 和 set 访 问 相 同 的 根 作 用 域 。 

指令 舱 套 并 不 一 定 意 味 着 需要 改变 它 的 作用 域 。 默 认 情 况 下 ， 子 指令 会 被 付 予 访问 父 DOM 
元 素 对 应 的 作用 域 的 能 力 ， 这 样 做 的 原因 可 以 通过 介绍 指令 的 scope 人 参数 来 理解 ，scope 参 数 默 


认 是 false。 


























10.2.1 _ scope 参数 〈 布 尔 型 或 对 象 ) 
scope 人 参数 是 可 选 的 ， 可 以 被 设置 为 true 或 一 个 对 象 。 默 认 值 是 false。 
当 scope 设 置 为 true 时 ,会 从 父 作 用 域 继承 并 创建 一 个 新 的 作用 域 对 象 。 


如 果 一 个 元 素 上 有 多 个 指令 使 用 了 隔离 作用 域 , 其 中 只 有 一 个 可 以 生效 。 只 有 指令 模板 中 的 
根 元 素 可 以 获得 一 个 新 的 作用 域 。 因 此 ， 对 于 这 些 对 象 来 说 scope 默 认 被 设置 为 true。 


内 置 指令 ng-controller 的 作用 ,就 是 从 父 级 作用 域 继承 并 创建 一 个 新 的 子 作 用 域 。 它 会 创 
建 一 个 新 的 从 父 作 用 域 继承 而 来 的 子 作 用 域 。 


用 这 些 新 内 容 更 新 一 下 前 面 的 例子 : 





























<div ng-app="myApp" 
ng-init="someProperty = 'some data'"> 
<div ng-init="siblingProperty='moredata'"> 
Inside Div Two: {{ aThirdProperty }} 
<div ng-init="aThirdProperty = 'data for 3rd property'" 
ng-controller="SomeController"> 
Inside Div Three: {{ aThirdProperty }} 
<div ng-init="aFourthProperty"> 
Inside Div Four: {{ aThirdProperty }} 
</div> 
</div> 
</div> 
</div> 


如 果 直 接 运 行 这 段 代码 会 报错 , 因为 没有 在 JavaScript 中 定义 所 需 的 控制 器 , 下面 就 来 定义 这 
个 控制 器 : 

angular.module('myApp'，[]) 

.controller('SomeController', function($scope) { 

// 可 以 留 室 ， 但 需要 被 定义 

}) 

刷新 页 面 ， 会 发 现 第 二 个 div 中 由 于 {{ aTgirdProperty }} 未 定义 ， 因 此 什么 都 没有 输出 。 
第 三 个 div 显 示 了 设置 在 继承 来 的 作用 域 中 的 data for a 3rd property， 如 图 10-1 所 示 。 


为 了 进一步 证 明 作 用 域 的 继承 机 制 是 向 下 而 非 向 上 进行 的 , 下 面 再 看 另外 一 个 例子 ,展示 的 
是 {{ aThirdProperty }} 从 父 作 用 域 继承 而 来 : 
































“<div ng-app="myApp" 
ng-init="someProperty = 'some data'"></div> 
<div ng-init="siblingProperty='moredata'"> 
Inside Div Two: {{ aThirdProperty }} 
<div ng-init="aThirdProperty = 'data for 3rd property'" 
ng-controller="SomeController"> 
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Inside Div Three: {{ aThirdProperty }} 
<qiv ng-controller="SecondController"> 
Inside Div Four: {{ aThirdProperty }} 
</div> 
《</div> 
«</div> 


Boe directives.html xz 


Inside Div Two: 
Inside Div Three: data for 3rd property 
Inside Div Four: data for 3rd property 








图 10-1 指令 
在 JavaScript 中 加 入 SecondController 的 定义 : 


angular.module( 'myApp', [|]) 

.controller('SomeController', function($scope) { 
// 可 以 留 室 ， 但 需要 被 定义 

}) 

.controller('SecondController', function($scope) { 
// 同样 可 以 留 空 








}) 
如 果 要 创建 一 个 能 够 从 外 部 原型 继承 作用 域 的 指令 ， 将 scope 属 性 设置 为 true: 
angular.module('myApp'，[]) 
.directive('myDirective'，function() { 
return { 
restrict: 'A', 
scope: true 
} 
}); 
下 面 用 指令 来 改变 DOM 的 作用 域 : 
<div ng-app="myApp" 
ng-init="someProperty = 'some data'"></div> 
《<div ng-init="siblingProperty='moredata'"> 
Inside Div Two: {{ aThirdProperty }} 
<div ng-init="aThirdProperty = 'data for 3rd property'" 
ng-controller="SomeController"> 
Inside Div Three: {{ aThirdProperty }} 
<qiv ng-controller="SecondController"> 
Inside Div Four: {{ aThirdProperty }} 
<br> 
Outside myDirective: {{ myProperty }} 
<div my-directive ng-init="myProperty = 'wow, this is cool'"> 


Inside myDirective: {{ myProperty }} 
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<div> 
</div> 
</div> 
</div> 


在 线 示例 : http://jsbin.convITEBAF/l1/edit。 


现在 , 我 们 已 经 理解 了 指令 的 外 部 作用 域 和 继承 作用 域 是 如 何 工 作 的 ,下 面 介 绍 最 后 一 个 和 
作用 域 相 关 的 难题 : 隅 离 作 用 域 。 





10.2.2 ”隔离 作用 域 

隔离 作用 域 可 能 是 scope 属 性 三 个 选项 中 最 难 理解 的 一 个 ， 但 也 是 最 强大 的 。 隔 离 作 用 域 的 
概念 是 以 面向 对 象 编程 为 基础 的 。AngularJS 指 令 的 作用 域 中 可 以 看 到 如 Small Talk 语 言 和 SOLID 
原则 的 影子 。 

具有 隔离 作用 域 的 指令 最 主要 的 使 用 场景 是 创建 可 复 用 的 组 件 , 组 件 可 以 在 未 知 上 下 文中 使 
用 ， 并 且 可 以 避免 污染 所 处 的 外 部 作用 域 或 不 经 意 地 污染 内 部 作用 域 。 

创建 具有 隔离 作用 域 的 指令 需要 将 scope 属 性 设置 为 一 个 空 对 象 {}。 如 果 这 样 做 了 ， 指 令 的 
模板 就 无 法 访问 外 部 作用 域 了 : 


<div ng-controller='MainController'> 
Outside myDirective: {{ myProperty }} 






























































<div my-directive ng-init="myProperty = 'wow, this is cool'"> 
Inside myDirective: {{ myProperty }} 
«</div> 
</div> 


angular.module( 'myApp', []) 
.controller('MainController', function($scope) { 


}) 
.directive( 'myDirective', function() { 
return { 
restrict: 'A', 
scope: {}, 
priority: 100， 
template: '<div>Inside myDirective {{ myProperty }}¢/div>' 
}; 
站 和 


注意 ,这 里 为 myDirective 设 置 了 一 个 高 优先 级 。 由 于 ngInit 指 令 会 以 非 零 的 优先 
级 运行 ， 这 个 例子 将 会 优先 运行 hgInit 指 令 ， 然 后 才 是 我 们 定义 的 指定 ， 并 且 这 个 
myProperty 在 $scope 对 象 中 是 有 效 的 。 
在 线 示例 : http:Wjsbin.com/eguDEpa/l/edit。 


示例 代码 的 效果 与 将 scope 设 置 为 true 儿 乎 是 相同 的 。 下 面 看 一 下 使 用 继承 作用 域 的 指令 的 
例子 ， 对 比 一 下 二 者 : 


<div ng-init="myProperty="'wow,thisiscool'"> 
Surrounding scope: {{ myProperty }} 
<div my-inherit-scope-directive> </div> 
<div my-directive> «</div> 

</div> 
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JavaScript 代 码 : 

angular.module( 'myApp', [|]) 

.directive( 'myDirective', function() { 
return { 


restrict: 'A', 
template: 'Inside myDirective, isolate scope: {{ myProperty }}', 
scope: {} 
}; 
}) 
.directive( 'myInheritScopeDirective', function() { 
return { 
restrict: 'A', 
template: 'Inside myDirective, isolate scope: {{ myProperty }}', 
scope: true 





}; 
3 


在 线 示例 : http://jsbin.com/OxAlek/1/edit。 


理解 了 最 重要 的 关于 作用 域 的 概念 后 ， 就 可 以 将 隔离 作用 域 中 的 属性 同 外 部 世界 进行 绑 定 ， 
使 得 隔离 作用 域 可 以 和 外 部 进行 交互 。 


10.3 ” 绑 定 策略 

使 用 无 数据 的 隔离 作用 域 并 不 常见 。AngularJS 提 供 了 几 种 方法 能 够 将 指令 内 部 的 隔离 作用 
域 ， 同 指令 外 部 的 作用 域 进行 数据 绑 定 。 

为 了 让 新 的 指令 作用 域 可 以 访问 当前 本 地 作用 域 中 的 变量 ， 需 要 使 用 下 面 三 种 别名 中 的 一 种 。 

本 地 作用 域 属性 : 使 用 @ 符 号 将 本 地 作用 域 同 DOM 属 性 的 值 进行 绑 定 。 指 令 内 部 作用 域 可 以 
使 用 外 部 作用 域 的 变量 : 

@ (or @attr) 

现在 ， 可 以 在 指令 中 使 用 绑 定 的 字符 串 了 。 

双向 绑 定 : 通过 = 可 以 将 本 地 作用 域 上 的 属性 同 父 级 作用 域 上 的 属性 进行 双向 的 数据 绑 定 。 
就 像 普通 的 数据 绑 定 一 样 ， 本 地 属性 会 反映 出 父 数据 模型 中 所 发 生 的 改变 。 

= (or =attr) 

父 级 作用 域 绑 定 通过 & 符 号 可 以 对 父 级 作用 域 进行 绑 定 ， 以 便 在 其 中 运行 函数 。 意 味 着 对 这 
个 值 进行 设置 时 会 生成 一 个 指向 父 级 作用 域 的 包装 函数 。 

要 使 调用 带 有 一 个 参数 的 父 方法 ,我们 需要 传递 一 个 对 象 ， 这 个 对 象 的 键 是 参数 的 名 称 , 值 
是 要 传递 给 参数 的 内 容 。 

& (or &attr) 

例如 ,假设 我 们 在 开发 一 个 电子 邮件 客户 端 ， 并 且 要 创建 一 


<input type="text" ng-model="to"/> 

“1!-- 调用 指令 --》 

<div scope-example ng-model="to" 
on-send="sendMail(email)" 
from-name="ari@fullstack.io" /> 






























































一 


电子 邮件 的 文本 输入 框 : 
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这 里 有 一 个 数据 模型 ( ng-model )， 一 个 函数 (sendMail() ) 和 一 个 字符 串 〈 from-name )。 
在 指令 中 做 如 下 设置 以 访问 这 些 内 容 : 
scope: { 
ngModel: '='，// 将 ngModel 同 指定 对 象 绑 定 
onSend: '&'， // 将 引用 传递 给 这 个 方法 
fromName: '@' // 储存 与 fromName 相 关联 的 字符 串 
} 


双向 数据 绑 定 
双向 数据 绑 定 或 许 是 AngularJS 中 最 强大 的 功能 ， 借 助 它 我 们 可 以 将 一 个 私有 作用 域 中 的 属 
性 同 DOM 中 的 属性 值 进行 绑 定 。 在 前 面 一 草 已 经 有 一 个 很 好 的 例子 ， 展 示 了 ng-model 如 何在 外 


部 世界 同 自 定义 的 指令 之 间 进 行 双向 数据 绑 定 ， 这 个 指令 在 很 多 方面 都 同 ng-bind 相 似 。 回 顾 一 
下 上 一 章 的 内 容 ， 并 做 相应 的 练习 ， 来 更 好 地 理解 这 个 重要 的 概念 。 





10.3.1 transclude 
transclude 是 一 个 可 选 的 参数 。 如 果 设 置 了 ， 其 值 必须 为 true， 它 的 默认 值 是 false。 
和 典 入 有 时 被 认为 是 一 个 高 级 主题 , 但 某 些 情况 下 它 与 我 们 刚刚 学 习 过 的 作用 域 之 间 会 有 非常 
好 的 配合 。 使 用 租 入 也 会 很 好 地 扩充 我 们 的 工具 集 , 特别 是 在 创建 可 以 在 团队 、 项 目 、AngularJS 
社区 之 间 共 享 的 HTML 代 码 片 段 时 。 


芷 入 通常 用 来 创建 可 复 用 的 组 件 ， 典 型 的 例子 是 模 态 对 话 框 或 导航 栏 。 


我 们 可 以 将 整个 模板 , 包括 其 中 的 指令 通过 髋 入 全 部 传人 一 个 指令 中 。 这样 做 可 以 将 任意 内 
容 和 作用 域 传递 给 指令 。transclude 参 数 就 是 用 来 实现 这 个 目的 的 ， 指 令 的 内 部 可 以 访问 外 部 
指令 的 作用 域 ， 并 且 模 板 也 可 以 访问 外 部 的 作用 域 对 象 。 

为 了 将 作用 域 传 递 进去 ，scope 参 数 的 值 必须 通过 {} 或 true 设 置 成 隔离 作用 域 。 如 果 没 有 设 
置 scope 参 数 ， 那 么 指令 内 部 的 作用 域 将 被 设置 为 传人 模板 的 作用 域 。 
























































| 只 有 当 你 希望 创建 一 个 可 以 包含 任意 内 容 的 指令 时 , 才 使 用 bransclude: true。 


和 衣 入 允许 指令 的 使 用 者 方便 地 提供 自己 的 HTML 模 板 ， 其 中 可 以 包含 独特 的 状态 和 行为 ,并 
对 指令 的 各 方面 进行 自 定义 。 
下 面 一 起 来 实现 个 小 例子 ， 创 建 一 个 可 以 被 自 定义 的 可 复 用 指令 。 


我 们 来 创建 一 个 可 以 复 用 的 侧 边 栏 ， 同 WordPress 博 客 的 侧 边栏 很 相似 。 我 们 希望 可 以 保持 
CSS 样 式 的 一 致 性 ， 同 时 又 希望 可 以 在 复 用 时 尽量 少 写 HTML 代 码 。 


例如 ， 假 设 我 们 想 创 建 一 个 包括 标题 和 少量 HTML 内 容 的 侧 边栏 ， 如 下 所 示 : 


<div sideboxtitle="Links"> 
Uls 
<li>First link</1i> 
<li>Second link</1i> 
</ul> 
</div> 
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为 这 个 侧 边 栏 创建 一 个 简单 的 指令 ， 并 将 transclude 参 数 设 置 为 true: 


angular .module( 'myApp', []) 
.directive('sidebox', function() { 


return { 
restrict: 'EA', 
scope: { 
title: '@' 
}» 


transclude: true, 
template: '<div class="sidebox"»\ 
<div class="content">\ 
<h2 class="header">{{ title }}</h2»\ 
<Span class="content" ng-transclude>\ 
</span> \ 
</div>N 
&Aatws” 
霹 
所 5 


这 段 代码 告诉 AngularJS 编 译 吉 ， 将 它 从 DOM 元 素 中 获取 的 内 容 放 到 它 发 现 ng-transclude 
指令 的 地 方 。 

借助 transclusion， 我 们 可 以 将 指令 复 用 到 第 二 个 元 素 上 ， 而 无 须 担 心 样式 和 布局 的 一 致 
性 问题 。 

例如 ， 下 面 的 代码 会 产生 两 个 样式 完全 一 致 的 侧 边栏 ， 效 果 如 图 10-2 所 示 。 


<dqiv sideboxtitle="Links"> 
<Ul> 
liyFirst link</li 
<li>Second link</1i> 
</Uul> 
</div> 
<div sideboxtitle="TagCloud"> 
<div class="tagcloud"> 
<a href="">Graphics</a> 
<a href="">AngularJS</a> 
<a href="">D3</ay> 
<a href="">Front-end</ay> 
<a href="">Startup</ay> 
</div> 
</div> 


BO6e transclusion.html 把 





Links 


® First link 
e Second link 





TagCloud 





Graphics Angular]S D3 Front-end Startup 


图 10-2” 侧 边栏 
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如 果 指 令 使 用 了 transclude 参 数 ， 那 么 在 控制 咒 〈 下 面 马 上 会 介绍 ) 中 就 无 法 正常 监听 数 
据 模型 的 变化 了 。 这 就 是 最 佳 实践 总 是 建议 在 链接 函数 里 使 用 $watch 服 务 的 原因 。 


10.3.2 controller (字符 串 或 函数 ) 





controller 参 数 可 以 是 一 个 字符 串 或 一 个 函数 。 当 设置 为 字符 串 时 ,会 以 字符 串 的 值 为 名 字 ， 
来 查找 注册 在 应 用 中 的 控制 锅 的 构造 函数 : 





angular.module('myApp'，[) 

.directive('myDirective'， function() { 
restrict: 'A'，// 始终 需要 
controller: 'SomeController' 


}) 


// 应 用 中 其 他 的 地 方 ， 可 以 是 同一 个 文件 或 被 index.html 包含 的 另 一 个 文件 

angular .module( 'myApp') 

.Controller('SomeController', function($scope, $element, $attrs, $transclude) { 
// 控制 器 逻辑 放 在 这 里 

}); 


可 以 在 指令 内 部 通过 匿名 构造 函数 的 方式 来 定义 一 个 内 联 的 控制 磊 : 





angular .module( 'myApp',[]) 
.directive( 'myDirective', function() { 
restrict: 'A', 
controller: 
function($scope, $element, $attrs, $transclude) { 
// 控制 器 逻辑 放 在 这 里 
} 
站 


我 们 可 以 将 任意 可 以 被 注入 的 AngularJS 服 务 传递 给 控制 器 。 例 如 ， 如 果 我 们 想 要 将 $1og 服 
务 传人 控制 器 ， 只 需 简单 地 将 它 注入 到 控制 器 中 ， 便 可 以 在 指令 中 使 用 它 了 。 


控制 器 中 也 有 一 些 特殊 的 服务 可 以 被 注入 到 指令 当中 。 这 些 服务 有 : 














1. $scope 
与 指令 元 素 相 关联 的 当前 作用 域 。 
2. $element 
当前 指令 对 应 的 元 素 。 
3. $attrs 
由 当前 元 素 的 属性 组 成 的 对 象 。 例 如 ， 下 面 的 元 素 : 
‘<div id="aDiv"class="box"></div> 
具有 如 下 的 属性 对 象 : 
{ 
id: "aDiv", 


Class: "box" 


} 
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4.$transclude 
从 入 链接 函数 会 与 对 应 的 能 入 作用 域 进行 预 绑 定 。 
transclude 链 接 函 数 是 实际 被 执行 用 来 克隆 元 素 和 操作 DOM 的 函数 。 

















在 控制 器 内 部 操作 DOM 是 和 AngularJS 风 格 相悖 的 做 法 ,但 通过 链接 函数 就 可 以 
实现 这 个 需求 。 仅 在 compile 参 数 中 使 用 transcludeFn 是 推荐 的 做 法 。 


例如 ,我们 想 要 通过 指令 来 添加 一 个 超 链 接 标 签 。 可 以 在 控制 部 内 的 $transclude 函 数 中 实 
现 ， 如 下 所 示 : 


angular .module( 'myApp') 
.directive('link', function() { 
return { 
restrict: 'EA', 
transclude: true, 
controller: 
function($scope, $element, $transclude, $1log) { 
$transclude(function(clone) { 
var a = angular.element('«<a>'); 
a.attr('href', clone.text()); 
a.text(clone.text()); 
$1l0g.info("Created new a tag in link directive"); 
$element .append(a); 


$7 


指令 的 控制 器 和 1ink 函 数 可 以 进行 互 换 。 控制 占 主 要 是 用 来 提供 可 在 指令 间 复 用 的 行为 , 但 
链接 函数 只 能 在 当前 内 部 指令 中 定义 行为 ， 且 无 法 在 指令 间 复 用 。 





OO link 函 数 可 以 将 指令 互相 隔离 开 来 ， 而 controller 则 定义 可 复 用 的 行为 。 





由 于 指令 可 以 require 其 他 指令 所 使 用 的 控制 器 ， 因 此 控制 器 常 被 用 来 放置 在 多 个 指令 间 共 
享 的 动作 。 


如 果 我 们 希望 将 当前 指令 的 API 暴 露 给 其 他 指令 使 用 ， 可 以 使 用 controller 参 数 ， 否 则 可 以 
使 用 link 来 构造 当前 指令 元 素 的 功能 性 。 如 果 我 们 使 用 了 scope.$watch( ) 或 者 想 要 与 DOM 元 素 
做 实时 的 交互 ， 使 用 链接 会 是 更 好 的 选择 。 

技术 上 讲 ，$scope 会 在 DOM 元 素 被 实际 泻 染 之 前 传人 到 控制 器 中 。 在 某 些 情况 下 ， 例 如 使 
用 了 般 入 , 控制 器 中 的 作用 域 所 反映 的 作用 域 可 能 与 我 们 所 期 望 的 不 一 样 ,， 这 种 情况 下 ,$scope 
对 象 无 法 保证 可 以 被 正常 更 新 。 

















Q、 当 想 要 同 当前 屏幕 上 的 作用 域 交 互 时 ， 可 以 使 用 被 传 入 到 1ink 函 数 中 的 scope 
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10.3.3 contro 


angular.module 


Ar/ 


1lerAs (字符 串 ) 


controllerAs 人 参数 用 来 设置 控制 器 的 别名 , 可 以 以 此 为 名 来 发 布控 制 器 , 并 且 作 用 域 可 以 访 
问 controllerAs。 这 样 就 可 以 在 视图 中 引用 控制 融 ， 甚 至 无 需 注入 $scope。 


例如 ， 创 建 一 个 MainController ， 然 后 不 要 注 和 人 $scope， 如 下 所 示 : 





(myApp ' ) 








.controller('MainController', function() { 
this.name = "Ari"; 


}); 


现在 ， 在 HTML 中 无 需 引 用 作用 域 就 可 以 使 用 MainController。 


<div ng-appng-controller="MainControllerasmain"> 
<input type="text" ng-model="main.name" /> 
<span>{{ main.name }}¢/span> 


</div> 


这 个 参数 看 起 来 好 像 没 什么 大 用 , 但 它 给 了 我 们 可 以 在 路 由 和 指令 中 创建 匿名 控制 器 的 强大 
能 力 。 这 种 能 力 可 以 将 动态 的 对 象 创建 成 为 控制 器 ， 并 且 这 个 对 象 是 隔离 的 、 易 于 测试 的 。 
例如 ， 可 以 在 指令 中 创建 匿名 控制 器 ， 如 下 所 示 : 


angular.module('myApp ' ) 
.directive('myDirective'，function() { 


return { 


restrict: 'A', 


template: 
controllerAs: 























'<h4>{{ myController.msg }}</h4>', 
'myController', 


controller: function() { 
this.msg = "Hello World" 


} 
}; 
二) 


10.3.4 _ require 〈 字 符 串 或 数组 ) 
require 参 数 可 以 被 设置 为 字符 串 或 数组 , 字符 串 代 表 另 外 一 个 指令 的 名 字 。require 会 将 控 





制 器 注入 到 其 值 所 指定 的 指令 中 ， 并 作为 当前 指令 的 链接 函数 的 第 四 个 参数 。 





字符 串 或 数组 元 素 的 值 是 会 在 当前 指令 的 作用 域 中 使 用 的 指令 名 称 。 


scope 会 影响 指令 作用 域 的 指向 ， 是 一 个 隔离 作用 域 ， 一 个 有 依赖 的 作用 域 或 者 完全 没有 作 
用 域 。 在 任何 情况 下 ，AngularJS 编 译 吉 在 查找 子 控制 器 时 都 会 参考 当前 指令 的 模板 。 


如 果 不 使 用 ^ 前 绥 ， 指 令 只 会 在 自身 的 元 素 上 查找 控制 锅 。 





VE 


restrict: 'EA', 


require: "ngModel 























指令 定义 只 会 查找 定义 在 指令 作 当 前 用 域 中 的 ng-model=""。 


<!-- 指令 会 在 本 地 作用 域 查找 nig-model --》 


<div my-directive ng-model="object"></div> 
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require 人 参数 的 值 可 以 用 下 面 的 前 缀 进行 修饰 ， 这 会 改变 查找 控制 器 时 的 行为 : 
? 
如 果 在 当前 指令 中 没有 找到 所 需要 的 控制 器 ， 会 将 nul1 作 为 传 给 link 函 数 的 第 四 个 参数 。 


八 





如 果 添 加 了 ^ 前 缀 ， 指 令 会 在 上 游 的 指令 链 中 查找 require 参 数 所 指定 的 控制 器 。 

2 人 

将 前 面 两 个 选项 的 行为 组 合 起 来 ， 我 们 可 选择 地 加 载 需 要 的 指令 并 在 父 指令 链 中 进行 查找 。 
没有 前 绥 


如 果 没 有 前 级 ,指令 将 会 在 自身 所 提供 的 控制 器 中 进行 查找 , 如果 没有 找到 任何 控制 器 (或 
具有 指定 名 字 的 指令 ) 就 抛 出 一 个 错误 。 











10.4 AngularJS 的 生命 周期 


在 AngularJS 应 用 起 动 前 , 它们 以 HTML 文 本 的 形式 保存 在 文本 编辑 器 中 。 应 用 启动 后 会 进行 
编译 和 链接 , 作用 域 会 同 HTML 进行 绑 定 , 应 用 可 以 对 用 户 在 HTML 中 进行 的 操作 进行 实时 响应 。 
这 个 神器 的 效果 是 如 何 发 生 的 ? 创建 高 效率 的 应 用 需要 了 解 什么 ? 


在 这 个 过 程 中 总 共有 两 个 主要 阶段 。 

















10.4.1 编译 阶段 

第 一 个 阶段 是 编译 阶段 。 在 编译 阶段 ，AngularJS 会 遍历 整个 HTML 文档 并 根据 JavaScript 中 
的 指令 定义 来 处 理 页 面 上 声明 的 指令 。 

每 一 个 指令 的 模板 中 都 可 能 含有 另外 一 个 指令 ， 另 外 一 个 指令 也 可 能 会 有 自己 的 模板 。 当 
AngularJS 调 用 HTML 文档 根部 的 指令 时 , 会 遍历 其 中 所 有 的 模板 , 模板 中 也 可 能 包含 带 有 模板 的 


指令 。 











OO 模板 树 可 能 又 大 又 深 ,， 但 有 一 点 需要 注意 ， 尽 管 元 素 可 以 被 多 个 指令 所 支持 或 

修饰 ， 这 些 指令 本 身 的 模板 中 也 可 以 包含 其 他 指令 ， 但 只 有 属于 最 高 优先 级 指 
令 的 模板 会 被 解析 并 添加 到 模板 树 中 。 这 里 有 一 个 建议 ， 就 是 将 包含 模板 的 指 
令 和 添加 行为 的 指令 分 离开 来 。 如 果 一 个 元 素 已 经 有 一 个 含有 模板 的 指令 了 ， 
永远 不 要 对 其 用 另 一 个 指令 进行 修饰 。 只 有 有 具有 最 高 优先 级 的 指令 中 的 模板 会 
被 编译 。 





一 旦 对 指令 和 其 中 的 子 模板 进行 遍历 或 编译 ,编译 后 的 模板 会 返回 一 个 叫做 模板 水 数 的 函 
数 。 我 们 有 机 会 在 指令 的 模板 函数 被 返回 前 ， 对 编译 后 的 DOM 树 进行 修改 。 

在 这 个 时 间 点 DOM 树 还 没有 进行 数据 绑 定 ， 意 味 着 如 果 此 时 对 DOM 树 进行 操作 只 会 有 很 少 
的 性 能 开销 。 基 于 此 点 ，ng-repeat 和 ng-transclude 等 内 置 指令 会 在 这 个 时 候 ， 也 就 是 还 未 与 
任何 作用 域 数 据 进行 绑 定时 对 DOM 进 行 操作 。 
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以 ng-repeat 为 例 ， 它 会 遍历 指定 的 数组 或 对 象 ， 在 数据 绑 定之 前 构建 出 对 应 的 DOM 结 构 。 


如 果 我 们 用 ng-repeat 来 创建 无 序列 表 ， 其 中 的 每 一 个 <1i> 都 会 被 ng-click 指 令 所 修饰 ,这 
个 过 程 会 使 得 性 能 比 手动 创建 列表 要 快 得 多 ， 尤 其 是 列表 中 含有 上 百 个 元 素 时 。 


与 克隆 <1i> 元 素 ， 再 将 其 与 数据 进行 链接 ， 然 后 对 每 个 元 素 都 循环 进行 此 操作 的 过 程 不 同 ， 
我 们 仅 需 要 先 将 无 需 列表 构造 出 来 ， 然 后 将 新 的 DOM ( 编译 后 的 DOM ) 传递 给 指令 生命 周期 中 
的 下 一 个 阶段 ， 即 链接 阶段 。 
个 指令 的 表现 一 旦 编译 完成 , 马上 就 可 以 通过 编译 函数 对 其 进行 访问 , 编译 函数 的 签名 包 
含有 访问 指令 声明 所 在 的 元 素 (tElemente ) 及 该 元 素 其 他 属性 (tAttrs ) 的 方法 。 这 个 编译 函 
数 返回 前 面 提 到 的 模板 函数 ， 其 中 含有 完整 的 解析 树 。 


这 里 的 重点 是 , 由 于 每 个 指令 都 可 以 有 自己 的 模板 和 编译 函数 , 每 个 模板 返回 的 也 都 是 自己 
的 模板 函数 。 链 条 顶部 的 指令 会 将 内 部 子 指令 的 模板 合并 在 一 起 成 为 一 个 模板 函数 并 返回 , 但 在 
树 的 内 部 ， 只 能 通过 模板 函数 访问 其 所 处 的 分 支 。 


最 后 ,模板 函数 被 传递 给 编译 后 的 DOM 树 中 每 个 指令 定义 规则 中 指定 的 链接 函数 ， 























































































































10.4.2 ”compile (对 象 或 函数 ) 
compile 选 项 可 以 返回 一 个 对 象 或 也 数 。 


理解 compile 和 1ink 选 项 是 AngularJS 中 需要 深入 讨论 的 高 级 话题 之 一 ， 对 于 了 解 AngularJS 
究竟 是 如 何 工作 的 至 关 重 要 。 


compile 选 项 本 身 并 不 会 被 频繁 使 用 ， 但 是 1ink 函 数 则 会 被 经 常 使 用 。 本 质 上 ， 当 我 们 设置 
了 1link 选 项 , 实际 上 是 创建 了 一 个 postLink( ) 链 接 函 数 , 以 便 compile( ) 函数 可 以 定义 链接 函数 。 
通常 情况 下 ,如果 设置 了 compile 函 数 ,说明 我 们 希望 在 指令 和 实时 数据 被 放 到 DOM 中 之 前 
进行 DOM 操 作 ， 在 这 个 函数 中 进行 诸如 添加 和 有 删除 节点 等 DOM 操 作 是 安全 的 。 


















































OO compile 和 1ink 选 项 是 互 太 的。 如 果 同 时 设置 了 这 两 个 选项 ， 那 么 会 把 compile 
所 返回 的 函数 当 作 链接 函数 ， 而 link 选 项 本 身 则 会 被 忽略 。 


A 
compile: function(tEle, tAttrs, transcludeFn) { 
var tplEl = angular.element('<div>' + 

'<h2></h2>' + 
'«/div> '); 
var h2 = tplEl.find('h2'); 
h2.attr('type', tAttrs.type); 
h2.attr('ng-model', tAttrs.ngModel); 
h2.val( "hello"); 
tEle.replacewith(tp1lE1); 
return function(scope, ele, attrs) { 


// 连接 函数 


】 
ss 


如 果 模 板 被 克隆 过 ,那么 模板 实例 和 链接 实例 可 能 是 不 同 的 对 象 。 因 此 在 编译 函数 内 部 , 我 
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们 只 能 转换 那些 可 以 被 安全 操作 的 克隆 DOM 节 点 。 不 要 进行 DOM 事 件 监 听 器 的 注册 : 这 个 操作 
应 该 在 链接 函数 中 完成 。 

编译 函数 负责 对 模板 DOM 进 行 转换 。 

链接 函数 负责 将 作用 域 和 DOM 进 行 链 接 。 在 作用 域 同 DOM 链 接 之 前 可 以 手动 操作 DOM。 在 
实践 中 ， 编 写 自 定义 指令 时 这 种 操作 是 非常 罕见 的 , 但 有 几 个 内 置 指令 提供 了 这 样 的 功能 。 了 解 
这 个 流程 对 于 理解 AngularJS 真 正 的 工作 方式 很 有 帮助 。 








10.4.3 “链接 
用 1ink 函 数 创 建 可 以 操作 DOM 的 指令 。 


链接 函数 是 可 选 的 。 如 果 定 义 了 编译 函数 , 它 会 返回 链接 函数 , 因此 当 两 个 函数 都 定义 了 时 ， 
ee 如 果 我 们 的 指令 很 简单 , 并 且 不 需要 额外 的 设置 , 可 以 从 工厂 函数 ( 回 
函数 ) 返回 一 个 函数 来 代替 对 象 。 如 果 这 样 做 了 ， 这 个 函数 就 是 链接 函数 。 


下 面 两 种 定义 指令 的 方式 在 功能 上 是 完全 一 样 的 : 
























































angular .module( 'myApp', [|]) 
.directive( 'myDirective', function() { 
return { 


pre: function(tElement, tAttrs, transclude) { 

// 在 子 元 素 被 链接 之 前 执行 
// 在 这 里 进行 Don 转 换 不 安全 
// 之 后 调用 ' lihk'h 函 数 将 无 法 定位 要 链接 的 元 素 

} 

post: function(scope, iElement, iAttrs, controller) { 
// 在 子 元 素 被 链接 之 后 执行 
// 如 果 在 这 里 省 略 掉 编译 选项 
// 在 这 里 执行 DOM 转 换 和 链接 函数 一 样 安全 吗 


} 
}; 
}3 
angular.module( 'myApp', []) 
.directive( 'myDirective', function() { 
return { 
link: function(scope, ele, attrs) { 
return { 
pre: function(tElement, tAttrs, transclude) { 
// 在 子 元 素 被 链接 之 前 执行 
// 在 这 里 进行 Don 转 换 不 安全 
// 之 后 调用 ' lihk'h 函 数 将 无 法 定位 要 链接 的 元 素 
二 
post: function(scope, iElement, iAttrs, controller) { 
// 在 子 元 素 被 链接 之 后 执行 
// 如 果 在 这 里 省 略 掉 编 译 选项 
// 在 这 里 执行 DOM 转 换 和 链接 函数 一 样 安全 吗 
} 
} 
} 
}); 


当 定 义 了 编译 函数 来 取代 链接 函数 时 , 链接 函数 是 我 们 能 提供 给 返回 对 象 的 第 二 个 方法 , 也 
就 是 postLink 函 数 。 本质 上 讲 , 这 个 事实 正 说 明了 链接 函数 的 作用 。 它 会 在 模板 编译 并 同 作用 域 
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进行 链接 后 被 调用 ， 因 此 它 负 责 设置 事件 监听 器 ， 监 视 数据 变化 和 实时 的 操作 DOM。 
link 冰 数 对 绑 定 了 实时 数据 的 DOM 具 有 控制 能 力 ， 因 此 需要 考虑 性 能 问题 。 回 顾 一 下 10.4 
节 中 关于 性 能 的 考虑 ， 在 选择 是 用 编译 函数 还 是 链接 函数 实现 功能 时 ， 将 性 能 影响 考虑 进去 。 
链接 函数 的 签名 如 下 : 


link: function(scope, element, attrs) { 
// 在 这 里 操作 DOM 
} 


如 果 指 令 定义 中 有 require 选 项 ， 函 数 签名 中 会 有 第 四 个 参数 ， 代 表 控 制 带 或 者 所 依赖 的 指 
令 的 控制 器 。 
// require 'SomeController', 
link: function(scope, element, attrs, SomeController) { 
// 在 这 里 操作 DOM， 可 以 访问 required 指 定 的 控制 器 
} 


如 果 require 选 项 提供 了 一 个 指令 数组 ， 第 四 个 参数 会 是 一 个 由 每 个 指令 所 对 应 的 控制 器 组 
成 的 数组 。 

下 面 看 一 下 链接 函数 中 的 参数 : 

scope 

指令 用 来 在 其 内 部 注册 监听 器 的 作用 域 。 

iElement 

iElement 参 数 代表 实例 元 素 ， 指 使 用 此 指令 的 元 素 。 在 postLink 函 数 中 我 们 应 该 只 操作 此 
元 素 的 子 元 素 ， 因 为 子 元 素 已 经 被 链接 过 了 。 

iAttrs 

iAttrs 参 数 代表 实例 属性 , 是 一 个 由 定义 在 元 素 上 的 属性 组 成 的 标准 化 列表 , 可 以 在 所 有 指 
令 的 链接 函数 间 共 享 。 会 以 JavaScript 对 象 的 形式 进行 传递 。 

controller 

controller 人 参数 指向 require 选 项 定义 的 控制 器 。 如 果 没 有 设置 require 选 项 ， 那 么 
controller 参 数 的 值 为 undefined。 

控制 器 在 所 有 的 指令 间 共 享 ， 因此 指令 可 以 将 控制 器 当 作 通 信和 通道 (公共 API )。 如 果 设 置 了 
多 个 require， 那 么 这 个 参数 会 是 一 个 由 控制 器 实例 组 成 的 数组 ， 而 不 只 是 一 个 单独 的 控制 器 。 


















































10.5 ngModel 








ngModel 是 一 个 用 法 特殊 的 指令 , 它 提 供 更 底层 的 API 来 处 理 控 制 需 内 的 数据 。 当 我 们 在 指令 
中 使 用 ngModel 时 能 够 访问 一 个 特殊 的 API， 这 个 API 用 来 处 理 数 据 绑 定 、 验 证 、CSS 更 新 等 不 实 
际 操作 DOM 的 事情 。 

ngModel 控制 吉 会 随 ngModel 被 一 直 注 入 到 指令 中 ， 其 中 包含 了 一 些 方法 。 为 了 访问 
ngModelController 必 须 使 用 require 设 置 ( 像 前 面 的 例子 中 那样 ): 
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angular .module( 'myApp') 
.directive( 'myDirective’', function( ){ 
return { 
require: '?ngModel', 
link: function(scope, ele, attrs, ngModel) { 
if (!IngModel) return; 
// 现在 我 们 的 指令 中 已 经 有 ngModelController 的 一 个 实例 


}; 
}); 


OO 如 果 不 设置 require 选 项 ，ngModelController 就 不 会 被 注入 到 指令 中 。 


注意 ， 这 个 指令 没有 隔离 作用 域 。 如 果 给 这 个 指令 设置 隔离 作用 域 , 将 导致 内 部 ngMode1l 无 
法 更 新 外 部 ngModel 的 对 应 值 : AngularJS 会 在 本 地 作用 域 以 外 查询 值 。 


为 了 设置 作用 域 中 的 视图 值 ， 需 要 调用 ngModel .$setViewValue() 子 数 。ngModel .$set 
ViewValue( ) 函数 可 以 接受 一 个 参数 。 


value (字符 串 ) : value 人 参数 是 我 们 想 要 赋值 给 ngModel 实 例 的 实际 值 。 这 个 方法 会 更 新 控 
制 器 上 本 地 的 $viewValue ， 然 后 将 值 传递 给 每 一 个 $parser 函 数 (包括 验证 器 )。 


当 值 被 解析 ， 且 $parser 流 水 线 中 所 有 的 函数 都 调用 完成 后 ， 值 会 被 赋 给 $modelValue 属 性 ， 
并 且 传 递 给 指令 中 ng-model 属 性 提供 的 表达 式 。 


最 后 ， 所 有 步骤 都 完成 后 ，$viewCchangeListeners 中 所 有 的 监听 器 都 会 被 调用 。 


注意 , 单独 调用 $setViewValue( ) 不 会 唤起 一 个 新 的 digest 循 环 ,因此 如 果 想 更 新 指令 , 需要 
在 设置 $viewValue 后 手动 触发 digest。 


$setViewValue( ) 方 法 适合 于 在 自 定义 指令 中 监听 自 定义 事件 ( 比如 使 用 具有 回调 函数 的 
jQuery 插件 )， 我 们 会 希望 在 回调 时 设置 $viewValue 并 执行 digest 循 环 。 





























angular .module( 'myApp') 
.directive( 'myDirective', function() { 
return { 
require: '?ngModel', 
link: function(scope, ele, attrs, ngModel) { 
if (!ngModel) return; 


$(function() { 
ele.datepicker({ 
onSelect: function(date) { 
// 设置 视图 和 调用 apply 
scope.$apply(function() { 
ngModel .$setViewValue(date); 
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10.5.1 自 定义 泻 染 
在 控制 器 中 定义 $render 方 法 可 以 定义 视图 具体 的 泻 染 方式 。 这 个 方法 会 在 $parser 流 水 线 
完成 后 被 调用 。 
由 于 这 个 方法 会 破坏 AngularJS 的 标准 工作 方式 ， 因 此 一 定 要 谨慎 使 用 : 











angular .module( 'myApp ' ) 
.directive('myDirective'，function() { 
return { 
require: '?ngModel', 
link: function(scope, ele, attrs, ngModel) { 
if (!ngModel) return; 


ngModel.$render = function() { 
element.html(ngModel .$viewValue() || 'None'); 
}; 
}s 
小 
10.5.2 属性 


ngModelController 中 有 几 个 属性 可 以 用 来 检查 甚至 修改 视图 。 








1. $viewValue 
$viewValue 属 性 保存 着 更 新 视图 所 需 的 实际 字符 
2. $modelValue 


$modelValue 由 数据 模型 持 有 。$modelValue 和 $viewValue 可 能 是 不 同 的 ， 取 决 于 $parser 
流水 线 是 否 对 其 进行 了 操作 。 








Ud 
O 








3. $parsers 

$parsers 的 值 是 一 个 由 函数 组 成 的 数组 ， 其 中 的 函数 会 以 流水 线 的 形式 被 逐一 调用 。 
ngModel 从 DOM 中 读 取 的 值 会 被 传人 $parsers 中 的 函数 ， 并 依次 被 其 中 的 解析 器 处 理 。 

这 是 为 了 对 值 进行 处 理 和 修饰 。 我 们 已 经 简单 介绍 过 验证 流水 线 是 如 何 工作 的 了 。 更 多 关于 
通过 创建 $parser 来 进行 验证 的 信息 请 查阅 10.6 节 。 




















4 








4. $formatters 

$formatters 的 值 是 一 个 由 函数 组 成 的 数组 ， 其 中 的 函数 会 以 流水 线 的 形式 在 数据 模型 的 值 
发 生变 化 时 被 逐一 调用 。 它 和 $parser 流 水 线 互 不 影响 ， 用 来 对 值 进 行 格式 化 和 转换 ， 以 便 在 绑 
定 了 这 个 值 的 控件 中 显示 。 

5. $viewChangeListeners 

$viewChangeL isteners 的 值 是 一 个 由 函数 组 成 的 数组 ， 其 中 的 困 数 会 以 流水 线 的 形式 在 视 
图 中 的 值 发 生变 化 时 被 逐一 调用 。 通 过 $viewCchangeListeners， 可 以 在 无 需 使 用 $watch 的 情况 
下 实现 类 似 的 行为 。 由 于 返回 值 会 被 忽略 ， 因 此 这 些 函 数 不 需 要 返回 值 。 
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6. $error 


$error 对 象 中 保存 着 没有 通过 验证 的 验证 器 名 称 以 及 对 应 的 错误 信息 。 





7.$pristine 
$pristine 的 值 是 布尔 型 的 ， 可 以 告诉 我 们 用 户 是 否 对 控件 进行 了 修改 。 




















8. $dirty 
$dirty 的 值 和 $pristine 相 反 ， 可 以 告诉 我 们 用 户 是 否 和 控件 进行 过 交互 。 
9. $valid 


$valid 值 可 以 告诉 我 们 当前 的 控件 中 是 否 有 错误 。 当 有 错误 时 值 为 false, 没有 错误 时 值 为 true。 
10. $invalid 
$invalid 值 可 以 告诉 我 们 当前 控件 中 是 否 存 在 至 少 一 个 错误 ， 它 的 值 和 $valid 相 反 。 


10.6 ” 自 定义 验证 


前 面 验证 章节 介绍 过 如 何 使 用 指令 创建 自 定 义 验证 。 使 用 AngularJS 可 以 方便 地 通过 指令 添 
加 自 定 义 验证 。 例 如 , 我们 需要 验证 username 在 数据 库 中 是 否 合 法 ,可 以 实现 一 个 指令 ， 用 来 在 
表单 发 生变 化 时 发 送 Ajax 请 求 : 








angular.module('validationExample'，[]) 
.directive('ensureUnique' ,function($http) { 
return { 


require: 'ngModel', 
link: function(scope, ele, attrs, c) { 
scope.$watch(attrs.ngModel, function() { 
$http({ 
method: "POST ' ， 
url: '/api/check/' + attrs.ensureUnique, 
data: {field: attrs.ensureUnique, valud:scope.ngModel 
}).success(function(data,status,headers,cfg) { 
c.$setValidity('unique', data.isUnique); 
}).error(function(data, status,headers,cfg) { 
c.$setValidity('unique', false); 


OO 出 于 演示 目的 , 尽管 我 们 在 指令 内 置 入 了 一 个 $http 调 用 , 但 是 在 产品 中 的 指令 
内 使 用 $http 是 不 明智 的 。 相反, 将 它 置 入 到 服务 中 会 更 好 。 关 于 服务 的 更 多 信 
息 请 参 第 14 章 。 


可 以 像 使 用 其 他 AngularJS 的 内 置 验证 一 样 来 使 用 这 个 自 定 义 验证 ， 如 下 所 示 : 





<input type="text" 
placeholder="Desired username" 
name="USername" 
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ng-model="signup.username" 
ng-minlength="3" 

ng-maxlength="20" 
ensure-unique="username"” required /> 


在 这 个 自 定义 验证 中 ， 每 当 ngModel 中 对 应 的 字段 发 生变 化 就 会 向 服务 器 发 送 请 求 ， 以 检查 
用 户 名 是 否 是 唯一 的 。 
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AngularJS 模 块 可 以 在 被 加 载 和 执行 之 前 对 其 自身 进行 配置 。 我 们 可 以 在 应 用 的 加 载 阶段 应 
用 不 同 的 逻辑 组 。 


11.1 配置 


在 模块 的 加 载 阶 段 ，AngularJS 会 在 提供 者 注册 和 配置 的 过 程 中 对 模块 进行 配置 。 在 整个 
AngularJS 的 工作 流 中 ， 这 个 阶段 是 唯一 能 够 在 应 用 启动 前 进行 修改 的 部 分 。 





angular.module( 'myApp', [|]) 
.config(function($provide) { 


}); 
这 本 书 的 大 部 分 内 容 都 在 使 用 config( ) 函数 的 语法 糖 ， 并 在 配置 阶段 执行 。 例如, 我 们 在 某 
个 模块 之 上 创建 一 个 服务 或 指令 时 : 


angular .module( 'myApp', []) 
.factory( 'myFactory', function(){ 
var service = {}; 
return service; 
}) 
.directive( 'myDirective', function(){ 
return { 
template: '<button>Click me</button>' 
} 
}) 


AngularJS 会 在 编译 时 执行 这 些 辅助 函数 。 它 们 在 功能 上 等 同 于 下 面 的 写法 : 





angular.module( 'myApp', [|]) 
.config(function($provide ,$compileProvider) { 
$provide. factory('myFactory', function() { 
var service = {}; 
return service; 
] 和 
$compileProvider.directive('myDirective', function() { 
return { 
template: '<button>Click me</button>' 
] 和 
] 


需要 特别 注意 ，AngularJS 会 以 这 些 函 数 书写 和 注册 的 顺序 来 执行 它们 。 也 就 是 说 我 们 无 法 
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注入 一 个 尚未 注册 的 提供 者 。 


OG 唯一 例外 的 是 constant() 方 法 ， 这 个 方法 总 会 在 所 有 配置 块 之 前 被 执行 。 














当 对 模块 进行 配置 时 ， 需 要 格外 注意 只 有 少数 几 种 类 型 的 对 象 可 以 被 注入 到 config( ) 函数 
中 : 提供 者 和 和 常量。 如果 我 们 将 一 个 服务 注入 进去 , 会 在 真正 对 其 进行 配置 之 前 就 意外 地 把 服务 
实例 化 了 。 

这 种 对 配置 服务 进行 严格 限制 的 另外 一 个 副作用 就 是 ， 我 们 只 能 注入 用 provider( ) 语 法 构 
建 的 服务 ， 其 他 的 则 不 行 。 

更 多 关于 用 provider( ) 语 法 构建 服务 的 内 容 ， 请 查看 第 14 章 。 

这 些 config() 代 码 块 可 以 对 我 们 的 服务 进行 自 定义 配置 ,例如 设置 API 密 钥 或 自 定 义 URL 等 。 

也 可 以 定义 多 个 配置 块 , 它们 会 按照 顺序 执行 , 这 样 就 可 以 将 应 用 不 同 阶段 的 配置 代码 集中 
在 不 同 的 代码 块 中 。 

angular.module('myApp'，[]) 

.config(function($routeProvider) { 

$routeProvider.when('/', { 
controller: 'WelcomeController', 


template: 'views/welcome.html' 


}); 








}) 
.config(function(ConnectionProvider) { 
ConnectionProvider.setApiKey('SOME_API_KEY'); 


二 
config( ) 函数 接受 一 个 参数 。 


口 configFunction( 函数 ): AngularJS 在 模块 加 载 时 会 执行 这 个 函数 。 


11.2 ”运行 块 

和 配置 块 不 同 ， 运 行 块 在 注入 髓 创建 之 后 被 执行 ， 它 是 所 有 AngularJS 应 用 中 第 一 个 被 执行 
的 方法 。 

运行 块 是 AngularJS 中 与 main 方 法 最 接近 的 概念 。 运行 块 中 的 代码 块 通常 很 难 进行 单元 测试 ， 
它 是 和 应 用 本 身高 度 耦 合 的 。 

运行 块 通常 用 来 注册 全 局 的 事件 监听 需 。 例 如, 我 们 会 在 .run() 块 中 设置 路 由 事件 的 监听 需 
以 及 过 滤 未 经 授权 的 请 求 。 

假设 我 们 需要 在 每 次 路 由 发 生变 化 时 , 都 执行 一 个 函数 来 验证 用 户 的 权限 , 放置 这 个 功能 唯 
一 合理 的 地 方 就 是 run 方 法 : 

































































angular .module( 'myApp', []) 
.run(function($rootScope, AuthService) { 
$rootScope.$on('$routeChangeStart', function(evt, next, current) { 
// 如 果 用 户 未 登录 
if (!AuthService.userLoggedIn()) { 
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if (next.templateUrl === "login.html") { 
// 已 经 转向 登录 路 由 因此 无 需 重 定向 
} else { 
$location.path('/login'); 
} 
} 
I 
}); 
run( ) 函数 接受 个 参数 。 


口 initializeFn (函数) AngularJS 在 注入 器 创建 后 会 执行 这 个 函数 。 
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多 重视 图 和 路 由 











能 够 从 页 面 的 一 个 视图 跳 转 到 另外 一 个 视图 , 对 单 页 面 应 用 来 讲 是 至 关 重 要 的 。 当 应 用 变 得 
越 来 越 复杂 时 ， 我 们 需要 一 个 合理 的 方式 来 管理 用 户 在 使 用 过 程 中 看 到 的 界面 。 

也 许 我 们 已 经 通过 在 主 H8TML 中 添加 行内 的 模板 代码 ,实现 了 对 视图 的 管理 , 但 这 些 代 码 也 
会 变 得 越 来 越 复杂 和 难以 管理 , 同时 其 他 开发 者 也 很 难 加 入 到 开发 工作 中 来 。 男 外 ,由 于 应 用 的 
状态 信息 会 包含 在 URL 中 ， 我们 也 无 法 将 代码 直接 复制 并 发 送 给 朋友 。 

除了 用 ng-include 指 令 在 视图 中 引用 多 个 模板 外 ， 更 好 的 做 法 是 将 视图 分 解 成 布局 和 模板 
视图 ， 并且 根据 用 户 当前 访问 的 URL 来 展示 对 应 的 视图 。 

我 们 会 将 这 些 模 板 分 解 到 视图 中 ， 并 在 布局 模板 内 进行 组 装 。AngularJS 允 许 我 们 在 $route 
服务 的 提供 者 $routeProvider 中 通过 声明 路 由 来 实现 这 个 功能 。 
通过 $routeProvider, 可 以 发 挥 出 浏览 器 历史 导航 的 优势 , 并 让 用 户 基 于 浏览 带 当 前 的 URL 
地 址 创建 书签 或 分 享 页 面 。 






























































12.1 安装 

从 1.2 版 本 开始 ，AngularJS 将 ngRoutes 从 核心 代码 中 剥离 出 来 成 为 独立 的 模块 。 我 们 需要 安 
装 并 引用 它 ， 才 能 够 在 AngularJS 应 用 中 正常 地 使 用 路 由 功能 。 

可 以 从 code.angularjs.org 下 载 它 ， 然 后 保存 到 一 个 可 以 在 HTML 页 面 中 进行 引用 的 位 置 ， 例 


如 js/vendor/angular-route.js。 


也 可 以 用 Bower 来 安装 ， 这 样 会 将 它 存 放 到 Bower 的 目录 中 。 查 看 34.6 节 获取 更 多 关于 Bower 
的 信息 。 


$bower instal1--save angular -route 














在 HTML 中 ， 需 要 在 AngularJS 之 后 引用 angular-route : 


<script src="js/vendor/angular.js"></script> 
<script src="js/vendor/angular-route.js"> </script> 


最 后 ， 要 把 ngRoute 模 块 在 我 们 的 应 用 中 当 作 依赖 加 载 进 来 : 


angular.module( 'myApp', ['ngRoute']); 
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12.2 布局 模板 


要 创建 一 个 布局 模板 ， 需 要 修改 HTML 以 告诉 AngularJS 把 模板 泻 染 到 何 处。 通过 将 ng-view 
首 令 和 路 由 组 合 到 一 起 ， 我 们 可 以 精确 地 指定 当前 路 由 所 对 应 的 模板 在 DOM 中 的 泻 染 位 置 。 


例如 ， 布 局 模板 看 起 来 可 能 是 下 面 这 样 的 : 


<header> 
<h1i>Header </h1> 

</header> 

<div class="content"> 
<div ng-view> </div> 

</div> 

<footer> 
<h5>Footer«</h5> 

</ footer> 


这 个 例子 中 ,我 们 将 所 有 需要 泻 染 的 内 容 都 放 到 了 了 <div class="content"> 中 ,而 cheader> 
和 footer> 中 的 内 容 在 路 由 改变 时 不 会 有 任何 变化 。 


ng-view 是 由 ngRoute 模 块 提供 的 一 个 特殊 指令 , 它 的 独特 作用 是 在 HTML 中 给 $route 对 应 的 
视图 内 容 占 位 。 


它 会 创建 自己 的 作用 域 并 将 模板 向 套 在 内 部 。 




















OO mg-view 是 一 个 优先 级 为 1000 的 终极 指令 。AngularJS 不 会 运行 同一 个 元 素 上 的 
低 优先 级 指令 (例如 cdiv ng-view></div> 元 素 上 其 他 指令 都 是 没有 意义 的 )。 


ngView 指 令 遵 循 以 下 规则 。 


口 每 次 触发 $routeChangeSuccess 事 件 ， 视 图 都 会 更 新 。 

口 如 果 某 个 模板 同 当 前 的 路 由 相关 联 : 

a 创建 一 个 新 的 作用 域 ; 

a 移 除 上 一 个 视图 ， 同 时 上 一 个 作用 域 也 会 被 清除 ; 

@ 将 新 的 作用 域 同 当前 模板 关联 在 一 起 ; 

@ 如 果 路 由 中 有 相关 的 定义 ， 那 么 就 把 对 应 的 控制 器 同 当 前 作用 域 关联 起 来 ; 
田 镍 发 $viewContentLoaded 事 件 ; 

@ 如 果 提 供 了 onload 属 性 ， 调 用 该 属性 所 指定 的 函数 。 


























12.3 ”路 由 


我 们 可 以 使 用 AngularJS 提 供 的 whnen 和 otherwise 两 个 方法 来 定义 应 用 的 路 由 。 
用 config 函 数 在 特定 的 模块 或 应 用 中 定义 路 由 。 
angular.module('myApp'，[] ). 

config(['$routeProvider '，function($routeProvider ) { 


// 在 这 里 定义 路 由 
1]); 
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这 里 我 们 用 了 数组 这 种 特殊 的 依赖 注入 语法 ,查看 第 13 章 获取 更 多 关于 这 种 语法 的 
内 容 。 
现在 , 我 们 可 以 用 when 方 法 来 添加 一 个 特定 的 路 由 ,这 个 方法 可 以 接受 两 个 参数 ( when(path， 
route) )。 


下 面 的 例子 展示 了 如 何 创 建 一 个 独立 的 路 























angular .module( 'myApp', [|]). 
config(['$routeProvider', function($routeProvider) { 
$routeProvider 
.when('/', { 


templateUrl: 'views/home.html', 
controller: 'HomeController' 


上 
}]); 


第 一 个 参数 是 路 由 路 径 ， 这 个 路 径 会 与 $location.path 进 行 匹 配 ，$location.path 也 就 是 
当前 URL 的 路 径 。 如 果 路 径 后 面 还 有 其 他 内 容 ， 或 使 用 了 双 和 斜 线 也 可 以 正常 匹配 。 我 们 可 以 在 
URL 中 存储 参数 ， 参 数 需 要 以 冒号 开头 (例如 :name )， 后 面 会 讨论 如 何 用 $routeParams 读 取 这 
此 参数 。 

第 二 个 参数 是 配置 对 象 , 决定 了 当 第 一 个 参数 中 的 路 由 能 够 匹配 时 具体 做 些 什 么 。 配 置 对 象 
中 可 以 进行 设置 的 属性 包括 controller 、template、templateURL 、resolve 、redirectTo 和 
reloadOnSearch。 


一 个 复杂 的 路 由 方案 会 包含 多 个 路 由 ， 以 及 一 个 可 以 将 所 有 意外 路 径 进行 重 定 向 的 捕获 需 。 
































angular.module('myApp'，[]). 
config(['$routeProvider', function($routeProvider) { 
$routeProvider 

.when('/', { 
templateUrl: 'views/home.html', 
controller: 'HomeController' 

}) 

.when('/login', { 
templateUrl: 'views/login.html', 
controller: 'LoginController' 


.when('/dashboard', { 
templateUrl: 'views/dashboard.html', 
controller: 'DashboardController', 
resolve: { 
user: function(SessionService) { 
return SessionService.getCurrentUser( ) ; 
} 
} 
}) 


.otherwise({ 
redirectTo: '/' 


}93 
}]); 


1. controller 


controller: 'MyController' 


// 或 者 
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controller: function($scope) {} 


如 果 配 置 对 象 中 设置 了 controller 属 性 ， 那 么 这 个 指定 的 控制 锅 会 与 路 由 所 创建 的 新 作用 
域 关 联 在 一 起 。 如 果 参 数值 是 字符 型 ， 会 在 模块 中 所 有 注册 过 的 控制 顺 中 查找 对 应 的 内 容 ， 然 后 
与 路 由 关联 在 一 起 。 如 果 参 数值 是 函数 型 ， 这 个 函数 会 作为 模板 中 DOM 元 素 的 控制 器 并 与 模板 
进行 关联 。 























2. template 

template: '<div> <h2>Route</h2> </div>' 

AngularJS 会 将 配置 对 象 中 的 HTML 模 板 泻 染 到 对 应 的 具有 ng-view 指 令 的 DOM 元 素 中 。 
3. templateUr1l 

templateUr1: 'views/template_name.html' 


应 用 会 根据 templateur1l 属 性 所 指定 的 路 径 通 过 XHR 读 取 视 图 ( 或 者 从 $templateCache 中 读 
取 )。 如 果 能 够 找到 并 读 取 这 个 模板 ，AngularJS 会 将 模板 的 内 容 泻 染 到 具有 ng-view 指 令 的 DOM 
元 素 中 。 


4. resolve 





























resolve: { 
‘data': ['$http', function($http) { 
return $http.get('/api').then( 
function success(resp) { return response.data; }, 
function error(reason) { return false; } 
bi 
有: 

} 

如 果 设 置 了 resolve 属 性 ，AngularJS 会 将 列表 中 的 元 素 都 注 和 人 到 控制 右 中 。 如 果 这 些 依赖 是 
promise 对 象 ,它们 在 控制 器 加 载 以 及 $routeChangeSuccess 被 触发 之 前 , 会 被 resolve 并 设置 成 一 
2 
个 值 。 


列表 对 象 可 以 是 : 


口 键 ， 键 值 是 会 被 注入 到 控制 器 中 的 依赖 的 名 字 ; 
口 工厂 ， 即 可 以 是 一 个 服务 的 名 字 ， 也 可 以 是 一 个 返回 值 ， 它 是 会 被 注 和 人 到 控制 器 中 的 函 
数 或 可 以 被 resolve 的 promise 对 象 。 
在 上 面 的 例子 中 ，resolve 会 发 送 一 个 $http 请 求 ， 并 将 data 的 值 替 换 为 返回 结果 的 值 。 列 
表 中 的 键 qata 会 被 注入 到 控制 锅 中 ， 所 以 在 控制 锅 中 可 以 使 用 它 。 


5. redirectTo 


























redirectTo: '/home' 

// 或 者 

redirectTo: function(route,path,search) 

如 果 redirectTo 属 性 的 值 是 一 个 字符 串 ， 那 么 路 径 会 被 蔡 换 成 这 个 值 ， 并 根据 这 个 目标 路 
径 触发 路 由 变化 。 


如 果 redirectTo 属 性 的 值 是 一 个 隐 数 ， 那 么 路 径 会 被 替换 成 函数 的 返回 值 ， 并 根据 这 个 目 
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标 路 径 触 发 路 由 变化 。 
如 果 redirectTo 属 性 的 值 是 一 个 函数 ，AngularJS 会 在 调用 它 时 传 入 下 面 三 个 参数 中 : 
(1) 从 当前 路 径 中 提取 出 的 路 由 参数 ; 
(2) 当前 路 径 ; 
(3) 当前 URL 中 的 查询 串 。 














6. reload0nSearch 


如 果 reloadonSearch 选 项 被 设置 为 true (默认 ), 当 $1location.search( ) 发 生变 化 时 会 重新 
加 载 路 由 。 如 果 设 置 为 false， 那 么 当 URL 中 的 查询 串 部 分 发 生变 化 时 就 不 会 重新 加 载 路 由 。 这 
个 小 窍门 对 路 由 藤 套 和 原 地 分 页 等 需求 非常 有 用 。 


现在 介绍 用 when 函 数 来 设置 路 由 。 


下 面 的 例子 中 设置 了 两 个 路 由 : 一 个 首页 路 由 和 一 个 收 件 箱 路 由 , 同时 首页 路 由 被 设置 成 默 
认 路 由 。 


angular.module('MyApp'，[]). 
config(['$routeProvider', function($routeProvider) { 
$routeProvider 
.when('/', { 
controller: 'HomeController', 
templateUrl: 'views/home.html' 






































}) 

.when('/inbox/:name', { 
controller: 'InboxController', 
templateUrl: 'views/inbox.html' 


}) 


.otherwise({redirectTo: '/'}); 


}]); 
如 上 ， 我们 已 经 用 when 方 法 设置 了 两 个 路 由 。otherwise 方 法 会 在 没有 任何 路 由 匹配 时 被 调 
用 ,我 们 用 它 设置 了 一 个 默认 跳 转 到 /路径 的 路 由 。 
当 浏 览 嚣 加载 AngularJS 应 用 时 ， 会 将 URL 设 置 成 默认 路 由 所 指向 的 路 径 。 除 非 我 们 在 浏览 
器 中 加 载 不 同 的 URL， 否 则 默认 会 使 用 /路 由 。 





$routeParams 


前 面 提 到 如 果 我 们 在 路 由 参数 的 前 面 加 上 : ,AngularJS 就 会 把 它 解 析出 来 并 传递 给 $routeParams。 
例如 ， 如 果 我 们 设置 下 面 这 样 的 路 由 : 
$routeProvider 
.when('/inbox/:name', { 
controller: 'InboxController', 


templateUr1l: 'views/inbox.html’' 


上 入 


AngularJS 会 在 $routeParams 中 添加 一 个 名 为 name 的 键 ， 它 的 值 会 被 设置 为 加 载 进来 的 URL 
中 的 值 。 


如 果 浏 览 句 加载 /inbox/al1 这 个 URL， 那 么 grouteParams 对 象 看 起 来 会 是 下 面 这 样 : 
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{ name: 'all' } 


需要 注意 ， 如 果 想 要 在 控制 需 中 访问 这 些 变量 ， 需 要 把 $routeParams 注 和 人 进 控制 需 : 








app.controller('InboxController', function($scope,$routeParams) { 
// 在 这 里 访问 $routeParams 
} 


12.4 $location 服务 

AngularJS 提 供 了 一 个 服务 用 以 解析 地 址 栏 中 的 URL， 并 让 你 可 以 访问 应 用 当前 路 径 所 对 应 
的 路 由 。 它 同样 提供 了 修改 路 径 和 处 理 各 种 形式 导航 的 能 力 。 

$location 服 务 对 JavaScript 中 的 window. location 对 象 的 API 进 行 了 更 优雅 地 封装 ， 

并 且 和 AngularJS 集 成 在 一 起 。 

当 应 用 需要 在 内 部 进行 跳 转 时 是 使 用 $1location 服 务 的 最 佳 场景 ， 比 如 当 用 户 注册 后 、 修 改 
或 者 登录 后 进行 的 跳 转 。 

$location 服 务 没有 刷新 整个 页 面 的 能 力 。 如 果 需 要 刷新 整个 页 面 ， 需 要 使 用 $window. 
location 对 象 (window. location 的 一 个 接口 )。 




















1. path() 

path( ) 用 来 获取 页 面 当前 的 路 径 : 

$location.path(); // 返回 当前 路 径 

修改 当前 路 径 并 跳 转 到 应 用 中 的 男 一 个 URL: 

$location.path('/'); // 把 路 径 修改 为 '/' 路 由 

path() 方 法 直接 和 HTML5 的 历史 API 进 行 交 互 , 所 以 用 户 可 通过 点 击 后 退 按钮 退回 到 上 一 个 
页 面 。 











2.replace() 
如 果 你 希望 跳 转 后 用 户 不 能 点 击 后 退 按钮 ( 对 于 登录 之 后 的 跳 转 这 种 发 生 在 某 个 跳 转 之 后 的 
再 次 跳 转 很 有 用 )，AngularJS 提 供 了 replace( ) 方 法 来 实现 这 个 功能 : 





$1location.path('/home' ) ; 
$location.replace() 

// 或 者 
$1location.path('/home').replace( ); 


3.absUr1() 
absUr1( ) 方 法 用 来 获取 编码 后 的 完整 URL: 


$1location.absUr1l() 

















4. hash() 
hash( ) 方 法 用 来 获取 URL 中 的 hash 片 段 : 


$location.hash(); // 返回 当前 的 hash 片 段 
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5. host() 

host( ) 方 法 用 来 获取 URL 中 的 主机 : 
$location.host();// 当前 URL 的 主机 

6. port() 

port() 方 法 用 来 获取 URL 中 的 端口 号 : 
$location.port();// 当前 URL 的 端口 

7. protocol() 

protocol( ) 方 法 用 来 获取 URL 中 的 协议 : 
$location.protocol();// 当前 URL 的 协议 

8. search() 

search( ) 方 法 用 来 获取 URL 中 的 查询 串 : 





$location.search( ); 

我 们 可 以 向 这 个 方法 中 传人 新 的 查询 参数 ， 来 修改 URL 中 的 查询 串 部 分 : 
// 用 对 象 设置 查询 

$location.search({name: 'Ari', username: 'auser'}); 


// 用 字符 串 设置 查询 
$location.search( 'name=Ari&username=auser' ) ; 


search 方 法 可 以 接受 两 个 参数 。 

口 search (可 选 ， 字 符 串 或 对 象 ) 

这 个 参数 代表 新 的 查询 参数 。hash 对 象 的 值 可 以 是 数组 。 
口 paramValue ( 可 选 ， 字 符 串 ) 


如 果 search 人 参数 的 类 型 是 字符 串 ， 那 么 paramvalue 会 做 为 该 参数 的 值 覆 盖 URL 当 中 的 对 应 
值 。 如 果 paramvalue 的 值 是 null ， 对 应 的 参数 会 被 移 除 掉 。 


9. url1() 
url() 方 法 用 来 获取 当前 页 面 的 URL : 
$location.url(); // 该 URL 的 字符 串 


如 果 调 用 ur1() 方 法 时 传 了 参数 ， 会 设置 并 修改 当前 的 URL， 这 会 同时 修改 URL 中 的 路 径 、 
查询 串 和 hash， 并 返回 $location。 


// 设置 新 的 URL 
$location.url('/home?name=Ari#thashthing ' ) ; 


url() 方 法 可 以 接受 两 个 参数 。 
Durl《〈 可 选 ， 字 符 串 ) 
新 的 URL 的 基础 的 前 级 。 
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口 replace (可 选 ， 字 符 串 ) 
想 要 修改 成 的 路 径 。 


12.5 ”路 由 模式 

不 同 的 路 由 模式 在 浏览 器 的 地 址 栏 中 会 以 不 同 的 URL 格 式 呈 现 。$1location 服 务 默认 会 使 用 
标签 模式 来 进行 路 由 。 

路 由 模式 决定 你 的 站 点 的 URL 长 成 什么 样子 。 

标签 模式 


标签 (hashbang ) 是 AngularJS 用 来 同 你 的 应 用 内 部 进行 链接 的 技巧 。 标 签 模式 是 HTMLS 模 
式 的 降级 方案 ，URL 路 径 会 以 # 符 号 开头 。 标 签 模 式 不 需要 重 写 a href="">“/ay 标 签 ， 也 不 需 
要 任何 服务 器 端的 支持 。 如 果 没 有 进行 额外 的 指定 ，AngularJS 将 默认 使 用 标签 模式 。 


使 用 标签 模式 的 URL 看 起 来 是 这 样 的 : 
http://yoursite.com/#!/inbox/all 
如 果 要 显 式 指定 配置 并 使 用 标签 模式 ， 需 要 在 应 用 模块 的 config 消 数 中 进行 配置 : 


angular .module( 'myApp', ['ngRoute']) 
.config(['$locationProvider', function($locationProvider) { 
$locationProvider .html5Mode( false); 
}1); 


我 们 还 可 以 配置 hashPrefix， 也 就 是 标签 模式 下 标签 默认 的 前 级 ! 符 号 。 这 个 前 级 也 是 
AngularJS 在 比较 老 的 浏览 器 中 降级 机 制 的 一 部 分 。 这 个 符号 ad 


angular.module( 'myApp', ['ngRoute']) 
.config(['$locationProvider', function($locationProvider) { 


$locationProvider .html5Mode( false); 
$locationProvider.hashPrefix('!'); 2 
































}1); 


12.5.1 HTMLS5 模式 


AngularJS 支 持 的 男 外 一 种 路 由 模式 是 ntm15 模 式 。 在 这 个 模式 中 ,URL 看 起 来 和 普通 的 URL 
和 (在 老式 浏览 器 中 看 起 来 还 是 使 用 标签 的 URL ),。 例如 ,同样 的 路 由 在 HTML5 模 式 中 看 起 来 


http://yoursite.com/inbox/all 


在 AngularJS 内 部 , $location 服 务 通过 HTML5 历 史 API 让 应 用 能 够 使 用 普通 的 UREL 路 径 来 
路 由 。 当 浏览 器 不 支持 HTML5 历 史 API 时 ，$1location 服 务 会 自动 使 用 标签 模式 的 URL 作 为 替代 
方案 

$location 服 务 还 有 一 个 有 趣 的 功能 ， 当 一 个 支持 HTML5 历 史 API 的 现代 浏览 器 加 载 了 一 个 
带 标签 的 URL 时 ， 它 会 为 用 户 重 写 这 个 URL。 
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在 HIML5S 模 式 中 ，AngularJS 会 负责 重 写 ca href=""></a> 中 的 链接 。 也 就 是 说 AngularJS 会 
根据 浏览 器 的 能 力 在 编译 时 决定 是 否 要 重 写 nref="" 中 的 链接 。 


例如 <a href="/person/42?all=true">Person</a>》 这 个 标签 ， 在 老式 浏览 器 中 会 被 重 写成 
标签 模式 的 URL: /index.html#!/person/42?al1=true。 但 在 现代 浏览 器 中 会 URL 会 保持 本 来 
的 样子 。 


后 端 服 务 器 也 需要 支持 URL 重 写 , 服 务 器 需要 确保 所 有 请 求 都 返回 index.html, 以 支持 HTML5 
模式 。 这 样 才 能 确保 由 AngularJS 应 用 来 处 理 路 由 。 


当 在 HTML5 模 式 的 AngularJS 中 写 链 接 时 ， 永 远 都 不 要 使 用 相对 路 径 。 如 果 你 的 应 用 是 在 根 
路 径 中 加 载 的 ， 这 不 会 有 什么 问题 ， 但 如 果 是 在 其 他 路 径 中 ，AngularJS 应 用 就 无 法 正确 处 理 路 
由 了 。 


另 一 个 选择 是 在 HTML 文档 的 HEAD 中 用 <basey> 标 签 来 指定 应 用 的 基础 URL: 





















































<base href="/base/url" /> 


12.5.2 ”路 由 事件 


$route 服 务 在 路 由 过 程 中 的 每 个 阶段 都 会 触发 不 同 的 事件 , 可 以 为 这 些 不 同 的 路 由 事件 设置 

监听 器 并 做 出 啊 应 。 
这 个 功能 对 于 控制 不 同 的 路 由 事件 ， 以 及 探测 用 户 的 登录 和 授权 状态 等 场景 是 非常 有 用 的 。 
我 们 需要 给 路 由 设置 事件 监听 器 ， 用 $rootScope 来 监听 这 些 事件 。 


1. $routeChangeStart 























AngularJS 在 路 由 变化 之 前 会 广播 $routeChangeStart 事 件 。 在 这 一 步 中 , 路 由 服务 会 开始 加 
载 路 由 变化 所 需要 的 所 有 依赖 ， 并 且 模 板 和 resolve 键 中 的 promise 也 会 被 resolve。 


angular .module( 'myApp', []) 
.run(['$rootScope', '$location', function($rootScope, $location) { 
$rootScope.$on('$routeChangeStart', function(evt, next, current) { 


人 





}1) 
$routeCchangeStart 事 件 带 有 两 个 参数 : 


口 将 要 导航 到 的 下 一 个 URL; 
口 路 由 变化 前 的 URL。 








2. $routeChangeSuccess 


AngularJS 会 在 路 由 的 依赖 被 加 载 后 广播 $routeChangeSuccess 事 件 。 


angular .module( 'myApp', []) 

.run(['$rootScope', '$location', function($rootScope, $location) { 
$rootScope.$on('$routeChangeSuccess', function(evt, next, previous) { 
所 7 
}12; 


$routeChangeStart 事 件 带 有 三 个 参数 : 
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口 原始 的 AngularJS ev 对象 ; 
口 用 户 当 前 所 处 的 路 由 ; 
口 上 一 个 路 由 (如果 当前 是 第 一 个 路 由 ， 则 为 undefined )。 





3. $routeChangeError 
AngularJS 会 在 任何 一 个 promise 被 拒绝 或 者 失败 时 广播 $routeCchangeError 事 件 。 


angular.module( 'myApp', []) 
.run(function($rootScope, $location) { 
$rootScope.$on('$routeChangeError', function(current, previous, rejection) { 


}); 
}); 


$routeChangeError 事 件 有 三 个 参数 : 
口 当前 路 由 的 信息 ; 
口 上 一 个 路 由 的 信息 ; 
口 被 拒绝 的 promise 的 错误 信息 。 
4. $routeUpdate 
AngularJS 在 reload0nSearch 属 性 被 设置 为 false 的 情况 下 ， 重 新 使 用 某 个 控制 需 的 实例 时 ， 
会 广播 $routeUpdate 事 件 。 

















12.5.3 ”关于 搜索 引擎 索引 


Web 有 爬虫 对 于 JavaScript 的 胖 客户 端 应 用 无 能 为 力 。 为 了 在 应 用 的 运行 过 程 中 给 爬虫 提供 文 
持 , 我 们 需要 在 头 部 添加 meta 标 签 。 这 个 元 标记 会 让 怜 虫 请 求 一 个 带 有 空 的 转 义 片段 参数 的 链接 ， 
服务 器 根据 请 求 返 回 对 应 的 HTMIL 代 码 片段 。 


<meta name="fragment" content="!"/> 











12.6 更 多 关于 路 由 的 内 容 


12.6.1 页 面 重新 加 载 


$location 服 务 不 会 重新 加 载 整 个 页 面 ， 它 只 会 单纯 地 改变 URL。 如 果 我 们 想 重 新 加 载 整个 
页 面 ， 需 要 用 $window 服 务 来 设置 地 址 。 


$window.1location.href = "/reload/page"; 


12.6.2 异步 的 地 址 变化 


如 果 我 们 想 要 在 作用 域 的 生命 周期 外 使 用 $1ocation 服 务 ， 必 须 用 $apply 也 数 将 变化 抛 到 
应 用 外 部 。 因 为 $1ocation 服 务 是 基于 $digest 来 驱动 浏览 器 的 地 址 变化 ， 以 使 路 由 事件 正常 工 
作 的 。 
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依赖 注入 











一 个 对 象 通常 有 三 种 方式 可 以 获得 对 其 依赖 的 控制 权 : 
(D 在 内 部 创建 依赖 ; 

(2) 通过 全 局 变量 进行 引用 ; 

(3) 在 需要 的 地 方 通过 参数 进行 传递 。 


依赖 注入 是 通过 第 三 种 方式 实现 的 。 其 余 两 种 方式 会 带 来 各 种 问题 ， 例 如 污染 全 局 作用 域 ， 
使 隔离 变 得 异常 困难 等 。 依赖 注 入 是 一 种 设计 模式 , 它 可 以 去 除 对 依赖 关系 的 硬 编码 ， 从 而 可 以 
在 运行 时 改变 甚至 移 除 依赖 关系 。 

在 运行 时 修改 依赖 关系 的 能 力 对 测试 来 讲 是 非常 理想 的 , 因为 它 允 许 我 们 创建 一 个 隔离 的 环 
境 ， 从 而 在 测试 环境 可 以 使 用 模拟 的 对 象 取代 生产 环境 中 的 真实 对 象 。 

从 功能 上 看 ,依赖 注入 会 事先 自动 查找 依赖 关系 ， 并 将 注入 目标 告知 被 依赖 的 资源 ， 这样 就 
可 以 在 目标 需要 时 立即 将 资源 注入 进去 。 

在 编写 依赖 于 其 他 对 象 或 库 的 组 件 时 , 我们 需要 描述 组 件 之 间 的 依赖 关系 。 在 运行 期 , 注入 
器 会 创建 依赖 的 实例 ， 并 负责 将 它 传递 给 依赖 的 消费 者 。 

// 出 自 Angular 文 档 的 优秀 示例 


function SomeClass(greeter) { 
this.greeter = greeter:; 




















} 
SomeClass.prototype.greetName = function(name) { 
this .greeter .greet(name ) 
所 
| 注意 ， 示 例 代码 在 全 局 作用 域 上 创建 了 一 个 控制 器 ， 这 并 不 是 一 个 好 主意 ， 这 
里 只 是 为 了 方便 演示 。 
SomeClass 能 够 在 运行 时 访问 到 内 部 的 greeter ， 但 它 并 不 关心 如 何 获得 对 greeter 的 引用 。 
为 了 获得 对 greeter 实 例 的 引用 ，Someclass 的 创建 者 会 负责 构造 其 依赖 关系 并 传递 进去 。 
基于 以 上 原因 ，AngularJS 使 用 $injetor (注入 器 服务 ) 来 管理 依赖 关系 的 查询 和 实例 化 。 
事实 上 ，$injetor 负 责 实 例 化 AngularJS 中 所 有 的 组 件 ， 包 括 应 用 的 模块 、 指 令 和 控制 器 等 。 
在 运行 时 ， 任 何 模块 启动 时 $injetor 都 会 负责 实例 化 ， 并 将 其 需要 的 所 有 依赖 传递 进去 。 
例如 下 面 这 段 代 码 。 这 是 一 个 简单 的 应 用 ， 声 明了 一 个 模块 和 一 个 控制 器 : 
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angular .module( 'myApp', [|]) 
.factory('greeter', function() { 
return { 


greet: function(msg) {alert(msg);} 
} 
}) 


.Controller('MyController '， 
function($scope, greeter) { 
$scope.sayHello = function() { 
greeter .greet("Hello!"); 
外 
上 


当 AngularJS 实 例 化 这 个 模块 时 ， 会 查找 greeter 并 自然 而 然 地 把 对 它 的 引用 传递 进去 


《<div ng-app="myApp"> 
<div ng-controller="MyController"> 
<button ng-click="sayHello()">Hello</button> 
《</div> 
</div> 


而 在 内 部 ，AngularJS 的 处 理 过 程 是 下 面 这 样 的 : 


// 使 用 注入 器 加 载 应 用 
var injector = angular.injector(['ng', 'myApp']); 
// 通过 注入 器 加 载 $controller 服 务 : var $controller = injector.get('$controller'); 
var scope = injector .get('$rootScope ' ) .$new() ; 
// 加 载 控 制 器 并 传 入 一 个 作用 域 ， 同 AngularJS 在 运行 时 做 的 一 样 
var MyController = $controller('MyController', {$scope: scope}) 


上 上 面 的 代码 中 并 没有 说 明 是 如 何 找到 greeter 的 ， 但 是 它 的 确 能 正常 工作 ， 因 为 $injector 
负责 为 我 们 查找 并 加 载 它 。 


AngularJS 通 过 annotate 函 数 ， 在 实例 化 时 从 传人 的 函数 中 把 参数 列表 提取 出 来 。 在 Chrome 
的 开发 者 工具 中 输入 下 面 的 代码 可 以 查看 这 个 函数 : 

















> injector.annotatel( function($q, greeter) {}) 
["$q", "greeter"] 


在 任何 一 个 AngularJS 的 应 用 中 ， 都 有 $injector 在 进行 工作 ， 无论 我 们 知道 与 否 。 当 编写 
控制 器 时 ， 如 果 没 有 使 用 [] 标 记 或 进行 显 式 的 声明 ，$injector 就 会 尝试 通过 参数 名 推断 依赖 
关系 。 











13.1 推断 式 注入 声明 

如 果 没 有 明确 的 声明 ，AngularJS 会 假定 参数 名 称 就 是 依赖 的 名 称 。 因 此 ， 它 会 在 内 部 调用 
函数 对 象 的 toString() 方 法 ,分析 并 提取 出 函数 参数 列表 ， 然 后 通过 $injector 将 这 些 参 数 注 和 
进 对 象 实例 。 注 和 的 过 程 如 下 : 

injector .invoke(function($http，greeter) {}); 

请 注意 ， 这 个 过 程 只 适用 于 未 经 过 压缩 和 混 消 的 代码 ， 因 为 AngularJS 需 要 原始 未 经 压缩 的 
参数 列表 来 进行 解析 。 

有 了 这 个 根据 参数 名 称 进行 推断 的 过 程 , 参数 顺序 就 没有 什么 重要 的 意义 了 , 因为 AngularJS 











图 灵 社 区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 





110 第 13 章 依赖 注入 





会 帮助 我 们 把 属性 以 正确 的 顺序 注入 进去 。 


JavaScript 的 压缩 器 通常 会 将 参数 名 改写 成 简单 的 字符 ， 以 减 小 源 文件 体积 〈 同 
时 也 会 删除 空格 、 空 行 和 注释 等 )。 如 果 我 们 不 明确 地 描述 依赖 关系 , AngularJS 
将 无 法 根据 参数 名 称 推断 出 实际 的 依赖 关系 ， 也 就 无 法 进行 依赖 注入 。 


13.2 ” 显 式 注入 声明 





AngularJS 提 供 


了 显 式 的 方法 来 明确 定义 一 个 函数 在 被 调用 时 需要 用 到 的 依赖 关系 。 通 过 这 


种 方法 声明 依赖 ， 即 使 在 源 代 码 被 压缩 、 参 数 名 称 发 生 改 变 的 情况 下 依然 能 够 正常 工作 。 

















可 以 通过 $inject 属 性 来 实现 显 式 注入 声明 的 功能 。 函 数 对 象 的 $inject 属 性 是 一 个 数组 ， 


























数组 元 素 的 类 型 是 字符 串 ， 它 们 的 值 就 是 需要 被 注入 的 服务 的 名 称 。 


下 面 是 示例 代码 : 


var aControllerFactory = 
function aController($scope, greeter) { 
console.1og("LOADED controller", greeter); 


A 控制 器 
| 
aControllerFactory.$inject = ['$scope', 'greeter']; // Greeter 服 务 


console.1og("greeter service"); 


} 


// 我 们 应 用 的 控制 器 
angular .module( 'myApp', []) 


.Controller( 


'MyController', aControllerFactory) 


.factory('greeter', greeterService); 
// 获取 注入 器 并 创建 一 个 新 的 作用 域 
var injector = angular.injector(['ng', 'myApp']), 
controller = injector.get('$controller'), 


rootSscope 


= injector.get('$rootScope'), 


newScope = rootScope. $new(); 


// 调用 控制 器 


controller('MyController', {$scope: newScope}); 


对 于 这 种 声明 方式 来 讲 ， 参 数 顺序 是 非常 重要 的 ， 因 为 $inject 数 组 元 素 的 顺序 必须 和 注入 
参数 的 顺序 一 一 对 应 。 这 种 声明 方式 可 以 在 压缩 后 的 代码 中 运行 ， 因为 声明 的 相关 信息 已 经 和 省 
数 本 身 绑 定 在 一 起 了 。 


13.3 行内 注 


AngularJS 提 供 








入 声明 
的 注入 声明 的 最 后 一 种 方式 ， 是 可 以 随时 使 用 的 行内 注入 声明 。 这 种 方式 其 








实 是 一 个 语法 糖 ， 它 同 前 面 提 到 的 通过 $inject 属 性 进行 注入 声明 的 原理 是 完全 一 样 的 ， 但 允许 
我 们 在 函数 定义 时 从 行内 将 参数 传人 。 此 外 ， 它 可 以 避免 在 定义 过 程 中 使 用 临时 变量 。 

在 定义 一 个 AngularJS 的 对 象 时 ， 行 内 声明 的 方式 允许 我 们 直接 传人 一 个 参数 数组 而 不 是 一 
个 函数 。 数 组 的 元 素 是 字符 串 ， 它 们 代表 的 是 可 以 被 注入 到 对 象 中 的 依赖 的 名 字 ， 最 后 一 个 参数 
就 是 依赖 注入 的 目标 函数 对 象 本 身 。 
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示例 如 下 : 


angular .module( 'myApp') 
.controller('MyController', ['$scope', 'greeter', function($scope, greeter) { 


}] 


由 于 需要 处 理 的 是 一 个 字符 串 组 成 的 列表 ， 行 内 注入 声明 也 可 以 在 压缩 后 的 代码 中 正常 运 
了 。 通 常 通过 括号 和 声明 数组 的 [] 符号 来 使 用 它 。 


— 




















一 
D 











13.4 $injector API 








在 实际 工作 中 , 我 们 很 少 直接 同 $injector 打 交道 , 但 是 了 解 一 下 $injector 有 哪些 API， 可 
以 帮助 我 们 更 好 地 理解 它 是 如 何 运 作 的 。 


13.4.1 annotate() 
annotate( ) 方 法 的 返回 值 是 一 个 由 服务 名 称 组 成 的 数组 , 这 些 服 务 会 在 实例 化 时 被 注入 到 目 
标 函 数 中 。annotate( ) 方 法 可 以 帮助 $injector 判 断 哪些 服务 会 在 函数 被 调用 时 注入 进去 。 
annotate() 方 法 可 以 接受 一 个 参数 : 
口 fn( 函数 或 数组 ) 


参数 fn 可 以 是 一 个 函数 ， 也 可 以 是 一 个 数组 。annotate( ) 方 法 返回 一 个 数组 ， 数 组 元 素 的 
值 是 在 调用 时 被 注入 到 目标 函数 中 的 服务 的 名 称 。 























var injector = angular.injector(['ng', 'myApp']); 
injector.annotatel( function($q, greeter) {}); 
// ['$q', 'greeter'] 


可 以 在 Chrome 的 调试 器 中 试 试 上 面 这 段 代码 。 
13.4.2 get() 

get() 方 法 返回 一 个 服务 的 实例 ， 可 以 接受 一 个 参数 : 

口 name (字符 串 ) 

参数 name 是 想 要 获取 的 实例 的 名 称 。 

get( ) 根 据 名 称 返 回 服务 的 一 个 实例 。 





13.4.3 has() 


has() 方 法 返回 一 个 布尔 值 ， 在 $injector 能 够 从 自己 的 注册 列表 中 找到 对 应 的 服务 时 返回 
true， 否 则 返回 false。 它 能 接受 一 个 参数 


口 name (字符 串 ) 


参数 name 是 我 们 想 在 注入 器 的 注册 列表 中 查询 的 服务 名 称 。 
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13.4.4 instantiate() 

instantiate() 方 法 可 以 创建 某 个 JavaScript 类 型 的 实例 。 它 会 通过 new 操 作 符 调 用 构造 函数 ， 
并 将 所 有 参数 都 传递 给 构造 函数 。 它 可 以 接受 两 个 参数 。 

口 Type( 函数 ) 

构造 函数 。 

口 locals ( 对象， 可 选 ) 

这 是 一 个 可 选 的 参数 ， 提 供 了 另 一 种 传递 参数 的 方式 。 

instantiate( ) 方 法 返回 Type 的 一 个 新 实例 。 





13.4.5 invoke() 
invoke( ) 方 法 会 调用 方法 并 从 $injector 中 添加 方法 参数 。 


invoke( ) 方 法 接受 三 个 参数 。 





fn( function) 
这 个 函数 就 是 要 调用 的 函数 。 这 个 函数 的 参数 由 函数 声明 设置 。 
self (object- 可 选 ) 

self 参 数 允 许 我 们 设置 调用 方法 的 this 参 数 。 

locals (object- 可 选 ) 

这 个 可 选 参 数 提供 另 一 种 方式 在 函数 被 调用 时 传递 参数 名 给 该 函数 。 
invoke( ) 方 法 返回 fn 函数 返回 的 值 。 





13.5 ngMin 
上 面 介绍 了 三 种 声明 依赖 注入 的 方式 , 可 以 在 定义 函数 时 选择 任意 一 种 合适 的 方式 。 但 在 实 
际 生 产 过 程 中 , 当代 码 体积 变 得 非常 庞大 时 , 写 代 码 还 要 关心 参数 顺序 将 是 一 个 耗费 心力 的 工作 。 
通过 使 用 ngMin 这 个 工具 ， 能 够 减少 我 们 定义 依赖 关系 所 需 的 工作 量 。ngMin 是 一 个 为 
AngularJS 应 用 设计 的 预 压缩 工具 ， 它 会 遍历 整个 AngularJS 应 用 并 帮助 我 们 设置 好 依赖 注入 。 
例如 ， 它 会 将 如 下 代码 : 


angular .module( 'myApp', []) 
.directive( 'myDirective', function($http) { }) 
.controller('IndexController', function($scope, $q) { 


}); 
转换 成 下 面 的 形式 : 





























angular .module( 'myApp', []) 
.directive( 'myDirective', ['$http', function ($http) { }]) 
.controller('IndexController', [ '$scope', '$q',function ($scope, $q) {} 1]); 
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ngMin 可 以 显著 减少 代码 输入 的 工作 量 ， 并 保持 源 文件 的 整洁 。 


13.5.1 安装 


可 以 通过 npm 包 管理 工具 来 安装 ngMin : 




















$ npm install -g ngmin 


| 如 果 正 在 使 用 Grunt， 我 们 可 以 安装 grunt-ngmin 插 件 。 如 果 正 在 使 用 Rails， 也 
可 以 通过 Ruby 的 包 管 理工 具 gem 来 安装 ngmin-rails。 


13.5.2 ”使 用 ngMin 


我 们 可 以 在 命令 行 界面 单独 使 用 ngMin ， 可 以 通过 标准 输入 输出 设备 或 标准 输出 流传 人 
inputjs 和 outputjs 两 个 参数 ， 例 如 : 
$ ngmin input.js output.js 


# 或 者 


$ ngmin < input.js > output.js 


input.js 是 源 文件 ， 而 output.js 则 是 转换 过 注入 声明 后 的 输出 文件 。 











13.5.3 ”工作 原理 

在 其 内 部 ，ngMin 使 用 抽象 语法 树 ( Abstract Syntax Tree，AST ) 来 遍历 JavaScript 源 代码 。 借 
助 名 为 astral 的 AST 工 具 框 架 的 帮助 ， 它 可 以 将 必要 的 声明 代码 添加 进 源 文 件 ， 并 用 escodegen 
将 转换 后 的 源 文件 输出 。 

ngMin 和 希望 我 们 的 AngularJS 源 代码 只 由 逻辑 定义 组 成 。 如 果 我 们 书写 代码 的 语法 和 这 本 书 里 
的 一 样 ， 那 么 ngMin 就 可 以 对 其 进行 解析 和 预 压 缩 。 














图 灵 社 区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 


服 务 








到 目前 为 止 ， 我 们 只 关心 视图 是 如 何 同 $scope 绑 定 在 一 起 ， 以 及 控制 器 是 如 何 管理 数据 的 。 
出 于 内 存 占用 和 性 能 的 考虑 ,控制 器 只 会 在 需要 时 被 实例 化 , 并且 不 再 需要 就 会 被 销毁 。 这 意味 
着 每 次 切换 路 由 或 重新 加 载 视 图 时 ， 当 前 的 控制 器 会 被 AngularJS 清 除 掉 。 

服务 提供 了 一 种 能 在 应 用 的 整个 生命 周期 内 保持 数据 的 方法 ， 它 能 够 在 控制 器 之 间 进 行 通 
信 ， 并 且 能 保证 数据 的 一 致 性 。 

服务 是 一 个 单 例 对 象 , 在 每 个 应 用 中 只 会 被 实例 化 一 次 ( 被 $injector 实 例 化 ), 并 且 是 延迟 
加 载 的 (需要 时 才 会 被 创建 )。 服 务 提供 了 把 与 特定 功能 相关 联 的 方法 集中 在 一 起 的 接口 。 

以 AngularJS 的 $http 服 务 为 例 ， 它 提供 了 对 浏览 器 的 XMLHttpRequest 对 象 的 底层 访问 功能 ， 
我 们 可 以 通过 $http 的 API 同 XMLHttpRequest 进 行 交 互 ， 而 不 需要 因为 调用 这 些 底 层 代码 而 污染 
应 用 。 

// 示例 服务 ， 在 应 用 的 整个 生命 周期 内 保存 current_user 

angular.module( 'myApp', []) 


.factory('UserService', function($http) { 
var current_user; 












































return { 
getCurrentUser: function() { 
return current_user; 
}, 
setCurrentUser: function(user) { 
current_user = user; 
} 
和 
1 
AngularJS 提 供 了 一 些 内 置 服务 ， 在 任何 地 方 使 用 它们 的 方式 都 是 统一 的 。 同 时 ， 为 复杂 应 


用 创建 我 们 自己 的 服务 也 是 非常 有 用 的 。 

在 AngularJS 中 创建 自己 的 服务 是 非常 容易 的 : 只 需要 注册 这 个 服务 即 可 。 服 务 被 注册 后 ， 
AngularJS 编 译 器 就 可 以 引用 它 ， 并 且 在 运行 时 把 它 当 作 依 赖 加 载 进来 。 服 务 名 称 的 注册 表 使 得 
在 测试 中 伪造 和 剔除 相互 隔离 的 应 用 依赖 变 得 非常 容易 。 

















14.1 注册 一 个 服务 
用 $injector 来 创建 和 注册 服务 有 好 几 种 方式 ， 本 章 后 面 会 介绍 它们 。 
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使 用 angular .module 的 factory API 创 建 服 务 ， 是 最 常见 也 是 最 灵活 的 方式 : 


angular.module( 'myApp.services'，[]) 
.factory('githubService', function() { 
var serviceInstance = {}; 
// 我 们 的 第 一 个 服务 
return servicelnstance; 


上 


尽管 githubService 没 做 什么 有 趣 的 事情 ， 但 现在 它 已 经 用 githubService 作 为 名 字 注 册 成 
为 这 个 AngularJS 应 用 的 一 个 服务 了 。 


服务 的 工厂 函数 用 来 生成 一 个 单 例 的 对 象 或 函数 ， 这 个 对 象 或 函数 而 是 服务 ， 它 会 存在 于 应 
用 的 整个 生命 周期 内 。 当 我 们 的 AngularJS 应 用 加 载 服务 时 ， 这 个 函数 会 被 执行 并 返回 一 个 单 例 
的 服务 对 象 。 


同 创建 控制 器 的 方法 一 样 ， 服 务 的 工厂 函数 既 可 以 是 一 个 函数 也 可 以 是 一 个 数组 : 


// 用 方 括号 声明 工厂 
angular.module( 'myApp.services', [|]) 
.factory('githubService', [function($http) { }]); 


例如 , githubService 需 要 访问 $http 服 务 , 所 以 我 们 将 $http 服 务 当 作 AngularJS 应 用 的 一 个 
依赖 ， 并 将 它 注 入 到 工厂 函数 中 。 





angular .module( 'myApp.services', []) 
.factory('githubService', function($http) { 
// 我 们 的 serviceInstance 现 在 可 以 在 函数 定义 中 访问 $nhttp 服 务 
var serviceInstance = {}; 
return servicelnstance; 
}); 
现在 , 无 论 何 处 需要 访问 GitHub API 都 不 需要 通过 $http 来 进行 了 , 可 以 通过 githubService 
来 代替 ， 并 证 它 处 理 所 有 复杂 的 业务 逻辑 和 远程 服务 。 
GitHub API 提 供 了 一 个 读 取 用 户 活 动 流 的 方法 (活动 流 就 是 用 户 记录 在 GitHub 中 的 最 近 的 寻 
件 列表 )。 在 我 们 的 服务 中 ， 可 以 创建 一 个 访问 这 个 API 的 方法 ， 并 将 API 的 请 求 结果 返回 。 


通过 将 方法 设置 为 服务 对 象 的 一 个 属性 来 将 其 暴露 给 外 部 。 











Hi 











angular.module( 'myApp.services', [|]) 
.factory('githubService', function($http) { 
var githubUr1l = 'https://api.github.com'; 





var runUserRequest = function(username, path) { 
// 从 使 用 JSONP 调 用 Github API 的 $http 服 务 中 返回 promise 
return $http({ 
method: 'JSONP', 
url: githubUrl1l + '/users/' + 
Username + '/' + 
path + '?callback=JSON_CALLBACK' 


}); 
二 
// 返回 带 有 一 个 events 函 数 的 服务 对 象 
return { 


events: function(username) { 
return runUserRequest(username, 'events'); 
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二季 
githubService 中 只 包含 了 一 个 方法 ， 可 以 在 应 用 的 模块 中 调用 。 


14.2 ”使 用 服务 
可 以 在 控制 器 、 指 令 、 过 滤器 或 另外 一 个 服务 中 通过 依赖 声明 的 方式 来 使 用 服务 。AngularJS 
会 像 平时 一 样 在 运行 期 自动 处 理 实例 化 和 依赖 加 载 的 相关 事宜 。 


将 服务 的 名 字 当 作 参 数 传 递 给 控制 器 函数 ,可 以 将 服务 注入 到 控制 器 中 。 当 服务 成 为 了 某 个 
控制 器 的 依赖 ， 就 可 以 在 控制 器 中 调用 任何 定义 在 这 个 服务 对 象 上 的 方法 。 




















angular.module('myApp'，['myApp.services']) 
.controller('ServiceController', function($scope, githubService) { 
// 我 们 可 以 调用 对 象 的 事件 函数 
$scope.events = githubService.events('auser ' ) 


}); 

githubService 服 务 已 经 被 注入 到 ServiceController 中 ， 可 以 像 使 用 任何 其 他 服务 一 样 使 
用 它 。 

修改 一 下 例子 ， 用 视图 中 输入 的 GitHub 用 户 名 为 参数 来 访问 GitHub API。 同 第 2 章 介 绍 的 内 
容 一 样 ， 将 username 属 性 和 视图 进行 绑 定 。 





<div ng-controller="ServiceController"> 
<label for="username"> 
Type in a GitHub username 
</1label> 
<input type="text" 
ng-model="Uusername" 
placeholder="Enter a GitHub username" /> 


<U1> 
《<li ng-repeat="event in events"> 
《1! 一 一 
event.actor and event.repo are returned 
by the github API. To view the raw 
API, uncomment the next line: 
一 一 > 
<《/-- {{ event | json }} -->» 
{{ event.actor.1login }} {{ event.repo.name }} 
/li 
</Ul> 
</div> 


基于 双向 数据 绑 定 ， 我 们 现在 可 以 通过 监视 $scope .username 来 响应 视图 中 的 数据 变化 。 





.Controller('ServiceController', 

function($scope, githubService) { 

// 注意 username 属 性 的 变化 

// 如 果 有 变化 就 运行 该 函数 

$scope.$watch('username', function(newUsername) { 
// 从 使 用 JSONP 调 用 Github API 的 $http 服 务 中 返回 promise 
githubService.events(newUsername) 

.success(function(data, status, headers) { 


// success 池 数 在 数据 中 封装 响应 
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// 因此 我 们 需要 调用 data.data 来 获取 原始 数据 


$scope.events = data.data; 
}) 
1 
}); 
由 于 $http 返 回 的 是 promise 对 象 ， 可 以 通过 .success() 方 法 像 直接 调用 $http 一 样 
调用 返回 的 对 象 。 
和 上 面 的 例子 一 样 ， 并 不 推荐 在 控制 器 中 使 用 $watch， 这 里 只 是 为 了 方便 演示 。 在 
实际 生产 中 会 将 这 个 功能 封装 进 一 个 指令 ， 并 在 指令 中 设置 $watch。 
在 这 个 例子 中 ,你 可 能 会 注意 到 在 输入 字段 发 生变 化 前 ， 有 一 个 延 时 。 如 果 不 延 时 , 将 导致 
输入 字段 中 的 任何 一 个 键盘 输入 都 会 让 终端 对 GitHub API 进 行 调用 ， 这 显然 不 是 我 们 希望 的 。 
通过 内 置 服务 $timeout 来 介绍 一 下 这 个 延 时 。 同 注入 githubService 一 样 , 需要 将 $timeout 
服务 注入 到 控制 器 中 : 


app.controller('ServiceController', function($scope, $timeout, githubService) { 


}); 





在 自 定义 服务 之 前 注入 所 有 的 AngularJS 内 置 服务 ， 这 是 约定 俗 成 的 规则 。 


现在 可 以 在 控制 器 中 使 用 $timeout 服 务 了 。 在 这 个 例子 中 $timeout 服 务 会 取消 所 有 网 络 请 
并 在 输入 字段 的 两 次 变化 之 间 延 时 350 ms。 换 句 话 说， 如果 用 户 两 次 输入 之 间 有 350 ms 的 间 
就 推断 用 户 已 经 完成 了 输入 ， 然 后 开始 向 GitHub 发 送 请 求 : 


app.controller('ServiceController', function($scope, $timeout, githubService) { 
// 和 上 面 的 示例 一 样 ， 添 加 了 $timeout 服 务 
var timeout; 
$scope.$watch('username', function(newUserName) { 
if (newUserName) { 
// 如 果 在 进度 中 有 一 个 超时 (timeout) 
if (timeout) $timeout.cancel(timeout); 
timeout = $timeout(function() { 
githubService.events(newUserName) 
.Success(function(data, status) { 
$scope.events = data.data; 


四 








到 现在 为 止 , 我 们 只 介绍 了 服务 如 何 将 类 似 的 功能 打包 在 一 起 ， 而 使 用 服务 也 是 在 控制 器 之 
间 共 享 数 据 的 典型 方法 。 

例如 ， 如 果 我 们 的 应 用 需要 后 端 服务 的 授权 ， 可 以 创建 一 个 SessionsService 服 务 处 理 用 户 
的 授权 过 程 ， 并 保存 服务 端 返 回 的 令 牌 。 当 应 用 中 任何 地 方 要 发 送 一 个 需要 授权 的 请 求 ， 可 以 通 
过 SessionsService 来 访问 令 牌 。 

如 果 我 们 的 应 用 中 有 一 个 用 来 设置 GitHub 用 户 名 的 设置 页 面 , 我 们 希望 在 应 用 中 所 有 的 控制 
髓 之 间 共 享用 户 名 。 
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为 了 在 控制 器 之 间 共 享 数据 ， 需 要 在 服务 中 添加 一 个 用 来 储存 用 户 名 的 方法 。 记 住 ， 服 务 在 
应 用 的 生命 周期 内 是 单 例 模式 的 ， 因 此 可 以 将 用 户 名 安全 地 储存 在 其 中 。 

















angular.module('myApp.services'，[]) 
.factory('githubService', function($http) { 
var githubUrl1l = 'https://api.github.com', 
githubUsername; 


var runUserRequest = function(path) { 
// 从 使 用 JSONP 的 Github API 的 $http 服 务 中 返回 promise 
return $http({ 
method: 'JSONP', 
url: githubUr1l + '/users/' + 
githubUsername + '/' + 
path + '"?callback=JSON_CALLBACK 


和 
上 
// 返回 带 有 两 个 方法 的 服务 对 象 
// 事件 
// 和 setUsername 
return { 
events: function() { 
return runUserRequest('events'); 
}s 
setUsername: function(username) { 
githubUsername = username; 
} 
}; 


}); 
现在 ， 服 务 中 有 一 个 setUsername 方 法 ， 用 来 保存 当前 的 GitHub 用 户 名 了 。 


githubService 可 以 注入 到 应 用 的 任何 一 个 控制 需 中 ， 并 可 以 在 控制 器 中 调用 events( ) 方 
法 ， 且 无 须 担 心 当 前 作用 域 对 象 上 的 用 户 名 是 否 是 正确 的 。 








angular.module('myApp'，['myApp.services']) 
.Controller('ServiceController', 
function($scope, githubService) { 
$scope.setUsername = 
githubService.setUsername; 


Fs 


14.3 创建 服务 时 的 设置 项 


在 AngularJS 应 用 中 ，factory( ) 方 法 是 用 来 注册 服务 的 最 常规 方式 ， 同 时 还 有 其 他 一 些 API 
可 以 在 特定 情况 下 帮助 我 们 减少 代码 量 。 
共有 5 种 方法 用 来 创建 服务 : 
口 factory() 
口 service() 
口 constant() 
口 value() 
口 provider() 
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14.3.1 factory() 











如 前 所 见 , factory( ) 方 法 是 创建 和 配置 服务 的 最 快捷 方式 。factory( ) 函数 可 以 接受 两 个 参数 。 
口 name (字符 串 ) 

需要 注册 的 服务 名 。 

口 getFn ( 函数 ) 

这 个 函数 会 在 AngularJS 创 建 服务 实例 时 被 调用 。 

angular.module('myApp') 

.factory('myService'，function() { 


return { 
"USername ' : 'auser' 


}; 
上 5 


为 服务 是 单 例 对 象 , getFn 在 应 用 的 生命 周期 内 只 会 被 调用 一 次 。 同 其 他 AngularJS 的 服务 
一 样 ， 在 定义 服务 时 ，getFn 可 以 接受 一 个 包含 可 被 注入 对 象 的 数组 或 函数 。 


getFn 函 数 可 以 返回 简单 类 型 、 函 数 乃 至 对 象 等 任意 类 型 的 数据 ( 同 value( ) 函数 类 似 )。 








angular.module( 'myApp ' ) 


.factory('githubService', ['$http', function($http) { 
return { 
getUserEvents: function(username) { 
ys 
} 
二 


}1); 


14.3.2 service() 


使 用 service() 可 以 注册 一 个 支持 构造 函数 的 服务 ， 它 允许 我 们 为 服务 对 象 注册 一 个 构造 


service( ) 方 法 接受 两 个 参数 。 

D name ( 字符 串 ) 

要 注册 的 服务 名 称 。 4 
口 constructor ( 函数 ) 

构造 函数 ， 我 们 调用 它 来 实例 化 服务 对 象 。 

service( ) 函数 会 在 创建 实例 时 通过 new 关 键 字 来 实例 化 服务 对 象 。 








var Person = function($http) { 
this.getName = function() { 
return $http({ method: 'GET', url: '/api/user'}); 
ly 
}; 


; 
angular.service( 'personService', Person); 
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14.3.3 provider() 


所 有 服务 工厂 都 是 由 $provide 服 务 创建 的 , $provide 服 务 负责 在 运行 时 初始 化 这 些 提供 者 。 


提供 

















者 是 一 个 具有 $get() 方 法 的 对 象 ，$injector 通 过 调用 $get 方 法 创建 服务 实例 。 


$provider 提 供 了 数 个 不 同 的 API 用 于 创建 服务 ， 每 个 方法 都 有 各 自 的 特殊 用 途 。 


所 有 创建 服务 的 方法 都 构建 在 provider 方 法 之 上 。provigder( ) 方 法 负责 在 $providerCache 
中 注册 服务 。 


从 技术 上 说 ， 当 我 们 假定 传 入 的 函数 就 是 $get( ) 时 ，factory( ) 函数 就 是 用 provider( ) 方 法 
注册 服务 的 简略 形式 。 


下 面 两 种 方法 的 作用 完全 一 样 ， 并 且 会 创建 同一 个 服务 。 


angular.module('myApp ' ) 
.factory('myService', function() { 


}) 








return { 
'Username': 'auser' 


}s 


// 这 与 上 面 工厂 的 用 法 等 价 
.provider('myService', { 


3 





$get: function() { 
return { 
'Username': 'auser' 
3 
} 


是 否 可 以 一 直 使 用 . factory( ) 方 法 来 代替 .provider() 呢 ? 








答案 取决 于 是 否 需 要 用 AngularJS 的 .config() 国 数 来 对 .proviqder() 方 法 返回 的 服务 进行 额 
外 的 扩展 配置 。 同 其 他 创建 服务 的 方法 不 同 ，config() 方 法 可 以 被 注入 特殊 的 参数 。 

比如 我 们 希望 在 应 用 启动 前 配置 githubService 的 URL: 

// 使 用 `.provider “注册 该 服务 


angular .module( 'myApp', []) 
.provider('githubService', function($http) { 























// 默认 的 ， 私 有 状态 
var githubUr1l = 'https://github.com' 


setGcithubUr1: function(url) { 
// 通过 .config 改 变 默 认 属 性 
if (url) { githubUrl = url } 
和 5 
method: JSONP，// 如 果 需 要 ， 可 以 重 写 





$get: function($http) { 
self = this; 
return $http({ method: self.method, url: githubUr1l + '/events'}); 





过 使 用 .provider() 方 法 ， 可 以 在 多 个 应 用 使 用 同一 个 服务 时 获得 更 强 的 扩展 性 ， 特 别 是 





在 不 同 应 用 或 开源 社区 之 间 共 享 服务 时 。 
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在 上 面 的 例子 中 ,provider() 方 法 在 文本 githubService 后 添加 Provider 生 成 了 一 个 新 的 提 
供 者 ，githubServiceProvider 可 以 被 注入 到 config( ) 函 数 中 。 


angular.module( 'myApp', [|]) 
.config( function(githubServiceProvider) { 
githubServiceProvider.setGithubUr1l("git@github.com"); 


}); 

如 果 希 望 在 config( ) 函数 中 可 以 对 服务 进行 配置 ， 必 须 用 provider() 来 定义 服务 。 

provider( ) 方 法 为 服务 注册 提供 者 。 可 以 接受 两 个 参数 。 

口 name (字符 串 ) 

name 人 参数 在 providerCache 中 是 注册 的 名 字 。name+Provider 会 成 为 服务 的 提供 者 。 同 时 name 
也 是 服务 实例 的 名 字 。 

例如 ， 如 果 定 义 了 一 个 githubService， 那 它 的 提供 者 就 是 githubServiceProvider。 

口 aProvider (对象 /函数 /数组 ) 


aProvider 可 以 是 多 种 形式 。 
函数 ， 那 么 它 会 通过 依赖 注入 被 调用 ， 并 日 负责 通过 $get 方 法 返回 一 个 















































如 果 aProvider 是 


对 象 。 
如 果 aProvider 是 数组 ， ee 内 依赖 注入 声明 的 函数 来 处 理 。 数 组 的 最 后 一 
个 元 素 应 该 是 函数 ， 可 以 返 带 有 $get 方 法 的 对 象 。 
如 果 aProvider 是 对 象 ， 它 应 该 带 有 $get 方 法 。 
provider() 函 数 返回 一 个 已 经 注册 的 提供 者 实例 。 


直接 使 用 provider( ) API 是 最 原始 的 创建 服务 的 方法 : 

















// 在 模块 对 象 上 直接 创建 provider 的 例子 
angular.module('myApp'，[]) 
.provider('UserService', { 

favoriteColor: null, 

setFavoriteColor: function(newColor) { 

this.favoriteColor = newColor; 

}, 

// $get 函 数 可 以 接受 injectables 

$get: function($http) { 


return { 
name ': 'Ari', 
getFavoriteColor: function() { 
return this.favoriteColor || ‘unknown'; 
} 
) 


3 
用 这 个 方法 创建 服务 ， 必 须 返回 一 个 定义 有 $get( ) 函数 的 对 象 ， 否 则 会 导致 错误 。 


eit ga ( 由 于 AngularJS 会 处 理 服 务 的 实例 化 ， 我 们 不 需要 自己 动手 ， 
更 多 信息 请 查看 第 24 章 
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// Get the injector 
var injector = angular.injector(['myApp']); // Invoke our service 
injector .invoke( 
['UserService', function(UserService) { 
// UserService returns 


OA 

// 'nName': 'Ari', 

// getFavoriteColor: function() {} 
// 1} 

}]); 





.provider( ) 是 非常 强大 的 ， 可 以 让 我 们 在 不 同 的 应 用 中 共享 服务 。 
了 解 constant() 和 value() 方 法 对 于 创建 服务 也 是 非常 重要 的 。 


14.3.4 constant() 


可 以 将 一 个 已 经 存在 的 变量 值 注册 为 服务 , 并 将 其 注入 到 应 用 的 其 他 部 分 当中 。 例 如, 假设 





我 们 需要 给 后 端 服 务 一 个 apiKey， 可 以 用 constant( ) 将 其 当 作 常量 保存 下 来 。 
constant( ) 函数 可 以 接受 两 个 参数 。 
D name (字符 串 ) 
需要 注册 的 常量 的 名 字 。 
口 value (常量 ) 
需要 注册 的 常量 的 值 〈 值 或 者 对 象 )。 
constant() 方 法 返回 一 个 注册 后 的 服务 实例 。 





angular.module( 'myApp') .constant('apiKey'，123123123 ' ) 
这 个 常量 服务 可 以 像 其 他 服务 一 样 被 注入 到 配置 函数 中 


angular.module('myApp ' ) 

.controller('MyController', function($scope, apiKey) { 
// 可 以 像 上 面 一 样 用 apiKey 作 为 常量 
// 用 123123123 作 为 字符 囊 的 值 
$scope.apiKey = apikKey; 

})3 


14.3.5 value() 





如 果 服 务 的 $get 方 法 返回 的 是 一 个 常量 ， 那 就 没 要 必要 定义 一 个 包含 复杂 功能 的 


™ 





可 以 通过 value( ) 函数 方便 地 注册 服务 。 
value( ) 方 法 可 以 接受 两 个 参数 。 
er Ap EE ) 


口 name (字符 串 
同样 是 需要 注册 的 服务 名 。 
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口 value ( 值 ) 
将 这 个 值 将 作为 可 以 注入 的 实例 返回 。 
value( ) 方 法 返回 以 name 参 数 的 值 为 名 称 的 注册 后 的 服务 实例 。 





angular .module( 'myApp') 
.Value('apiKey'，'123123123 ' ) ; 


14.3.6” 何 时 使 用 value( ) 和 constant() 
value( ) 方 法 和 constant( ) 方 法 之 间 最 主要 的 区 别 是 , 常量 可 以 注入 到 配置 函数 中 , 而 值 不 行 。 
通常 情况 下 ， 可 以 通过 value( ) 来 注册 服务 对 象 或 函数 ， 用 constant( ) 来 配置 数据 。 




















angular .module( 'myApp', []) 
.constant('apiKey', '123123123') 
.config(function(apiKey) { 
// 在 这 里 apiKey 将 被 赋值 为 123123123 
// 就 像 上 面 设置 的 那样 
} 
.Value('FBid'，'231231231 ' ) 
.config(function(FBid) { 
// 这 将 抛 出 一 个 错误 ， 未 知 的 provider: FBid 
// 因为 在 config 函 数 内 部 无 法 访问 这 个 值 
下 


14.3.7 decorator() 
$provide 服 务 提供 了 在 服务 实例 创建 时 对 其 进行 拦截 的 功能 , 可 以 对 服务 进行 扩展 , 或 者 用 
另外 的 内 容 完 全 代替 它 。 


装饰 器 是 非常 强大 的 ， 它 不 仅 可 以 应 用 在 我 们 自己 的 服务 上 ， 也 可 以 对 AngularJS 的 核心 服 
务 进 行 拦截 、 中 断 甚至 替换 功能 的 操作 。 事 实 上 AngularJS 中 很 多 功能 的 测试 就 是 借助 
$provide.decorator( ) 建 立 的 。 

对 服务 进行 装饰 的 场景 有 很 多 , 比如 对 服务 进行 扩展 , 将 外 部 数据 缓存 进 localStorage 的 功能 ， 
或 者 对 服务 进行 封装 以 便 在 开发 中 进行 调试 和 跟踪 等 。 

例如 ， 我 们 想 给 之 前 定义 的 githubService 服 务 加 入 日 志 功 能 ， 可 以 借助 decorator( ) 函数 
方便 地 实现 这 个 功能 ， 而 不 需要 对 原始 的 服务 进行 修改 。 

decorator() 国 数 可 以 接受 两 个 参数 。 

口 name (字符 串 ) 

将 要 拦截 的 服务 名 称 。 

口 decoratorFn ( 函数) 

在 服务 实例 化 时 调用 该 函数 ， 这 个 函数 由 injector .invoke 调 用 ， 可 以 将 服务 注入 这 个 也 
数 中 。 

$delegate 是 可 以 进行 装饰 的 最 原始 的 服务 ， 为 了 装饰 其 他 服务 ， 需 要 将 其 注入 进 装 饰 需 。 








图 灵 社区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 








124 第 14 章 服务 








例如 ， 下 面 的 代码 展示 了 如 何 给 githubService 添 加 装饰 器 ， 从 而 为 每 个 请 求 都 加 上 一 个 时 
间 戳 : 


var githubDecorator = function($dqelegate,$log) { 
var events = function(path) { 

var startedAt = new Date( ) ; 

var events = $delegate.events(path); 

// 事件 是 一 个 promise events.finally(function() { 

$log.info("Fetching events" + 

" took "+ 
(new Date() - startedAt) + "ms"); 


二 
return events ; 
}; 
return { 
events: events 
}3 


}; 


angular .module( 'myApp') 
.config(function($provide) { 
$provide.decorator('githubService' ,githubDecorator); 


下 
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AngularJS 应 用 是 完全 运行 在 客户 端的 应 用 。 我 们 已 经 看 到 ， 可 以 构建 一 个 完全 不 依赖 任何 
后 端 ， 同 时 也 能 实现 动态 内 容 和 啊 应 的 Web 应 用 。 

没有 后 端的 支持 ， 我 们 只 能 展示 随 页 面 一 起 加 载 进来 的 数据 。AngularJS 提 供 了 几 种 方式 将 
应 用 同 来 自 远程 服务 器 的 信息 集成 在 一 起 。 














15.1 使 用 $http 


我 们 可 以 使 用 内 置 的 $http 服 务 直 接 同 外 部 进行 通信 。$http 服 务 只 是 简单 的 封装 了 浏览 需 
原生 的 XMLHttpRequest 对象。 








$http 服 务 是 只 能 接受 一 个 参数 的 函数 , 这 个 参数 是 一 个 对 象 , 包含 了 用 来 生成 HTTP 请 求 的 
配置 内 容 。 这 个 函数 返回 一 个 promise 对 象 ， 具 有 success 和 error 两 个 方法 。 


», 查看 15.2 节 来 了 解 关于 可 选 配 置 选 项 的 详细 信息 。 


这 两 个 方法 最 基本 的 使 用 场景 如 下 : 


$http({ 
method: 'GET', 
url: '/api/users.json’ 
}).success(function(data,status,headers,config) { 
// 当 相 应 准备 就 绪 时 调用 
}).error(function(data, status,headers,config) { 
// 当 响 应 以 错误 状态 返回 时 调用 
上 


请 注意 ， 看 上 去 我 们 向 $http 中 传人 了 一 个 回调 函数 供 响应 返回 时 调用 ， 但 事实 并 非 如 此 。 
这 个 方法 实际 上 返回 了 一 个 promise 对 象 。 








当 promise 返 回 时 ， 我 们 可 以 将 $http 方 法 的 运行 结果 当 作 变量 一 并 返回 ， 并 将 其 他 promise 
司 它 串 联 在 一 起 ， 进 行 链 式 的 调用 。 

在 创建 服务 时 会 频繁 使 用 链 式 调用 技术 ， 因 此 服务 可 以 返回 一 个 promise 对 象 ， 而 不 需要 回 
调 函 数 。 


可 
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var promise = $http({ 
method: 'GET', 
url: '/api/users.json’ 


}); 

由 于 $http 方 法 返回 一 个 promise 对 象 , 我 们 可 以 在 响应 返回 时 用 then 方 法 来 处 理 回调 。 如 果 
使 用 then 方 法 , 会 得 到 一 个 特殊 的 参数 , 它 代 表 了 相应 对 象 的 成 功 或 失败 信息 , 还 可 以 接受 两 个 

可 选 的 函数 作为 参数 。 或 者 可 以 使 用 success 和 error 回 调 代 替 。 





promise.then( function(resp){ 
// resp 是 一 个 响应 对 象 

}, function(resp) { 
// 带 有 错误 信息 的 resp 

})3 

// 或 者 使 用 success/error 方 法 

promise.success(function(data, status, headers, config){ 
// 处 理 成 功 的 响应 

}); 

// 错误 处 理 

promise.error(function(data, status, headers, config){ 
// 处 理 非 成 功 的 响应 

上} 


如 果 啊 应 状态 码 在 200 和 299 之 间 ，, 会 认为 响应 是 成 功 的 , success 回 调 会 被 调用 ,否则 error 
回调 会 被 调用 。 








| 注意 ， 如 果 响 应 结果 是 重 定向 ，XMLHttpRequest 会 跟 进 这 个 重 定 向 ，error 回 
调 并 不 会 被 调用 。 


我 们 可 以 调用 HttpPromise 对 象 上 的 then() 、success() 和 error() 方 法 。then() 方 法 与 其 
他 两 种 方法 的 主要 区 别 是 ， 它 会 接收 到 完整 的 响应 对 象 ， 而 success( ) 和 error( ) 则 会 对 响应 对 
象 进行 析 构 。 

调用 http 方 法 后 , 在 下 一 个 $digest 循 环 运 行 之 前 它 并 不 会 被 真正 执行 。 尽管 大 部 分 情况 下 
我 们 都 是 在 $apply 代 码 快 内 部 使 用 $http ， 但 也 可 以 在 AngularJS 的 $digest 循 环 以 外 执行 这 个 
方法 。 

如 果 要 在 AngularJS 的 $digest 循 环 以 外 执行 $http 函 数 ， 需 要 将 其 封装 在 一 个 $apply 代 码 快 
中 。 这 样 会 强制 digest 循 环 执行 ， 我 们 的 promise 可 以 按 预 期 那样 被 resolve。 


























$scope.$apply(function( ){ 
$http({ 
method: "GET ' ， 
url: '/api/users.json' 


} 
} 


快捷 方法 

$http 服 务 提供 了 一 些 顺 手 的 快捷 方法 供 我 们 使 用 ， 这 些 方法 简化 了 复杂 设置 ， 只 需要 提供 
URL 和 HTTP 方 法 (或 者 POST 或 PUT 请 求 中 包含 的 数据 ) 即 可 。 

用 这 些 快 捷 方 法 ， 可 以 将 上 面 $http 的 GET 请 求 修改 成 : 
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// 快捷 的 GET 请 求 
$http.get('/api/users.json'); 


1. get() 

这 个 方法 是 发 送 GET 请 求 的 快捷 方式 。 

get( ) 函数 可 以 接受 两 个 参数 。 

D url (字符 串 ) 

一 个 绝对 或 相对 路 径 的 URL， 代 表 请 求 的 目的 地 。 
口 config ( 可 选 ， 对 和 象 ) 

这 是 一 个 可 选 的 设置 对 象 。 

get() 方 法 返回 HttpPromise 对 象 。 











2. delete() 

这 是 用 来 发 送 DELETE 请 求 的 快捷 方式 。 

delete( ) 函数 可 以 接受 两 个 参数 。 

口 url (字符 串 ) 

一 个 绝对 或 相对 路 径 的 URL， 代 表 请 求 的 目的 地 。 
口 config ( 可 选 ， 对 和 象 ) 

这 是 一 个 可 选 的 设置 对 象 。 

delete( ) 方 法 返回 HttpPromise 对 象 。 














3. head() 

这 是 用 来 发 送 HEAD 请 求 的 快捷 方式 。 

head( ) 函数 可 以 接受 两 个 参数 。 

口 url1 (字符 串 ) 

一 个 绝对 或 相对 路 径 的 URL， 代 表 请 求 的 目的 地 。 
口 config ( 可 选 ， 对 和 象 ) 

这 是 一 个 可 选 的 设置 对 象 。 

head( ) 方 法 返回 HttpPromise 对 象 。 

















4. jsonp() 

这 是 用 来 发 送 JSONP 请 求 的 快捷 方式 。 

jsonp( ) 函数 可 以 接受 两 个 参数 。 

口 url (字符 串 ) 

一 个 绝对 或 相对 路 径 的 URL ， 代 表 请 求 的 目的 地 。 为 了 发 送 JSONP 请 求 ， 其 中 必须 包含 
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JSON_CALLBACK 字 样 。 例 如 : 


$http 
.jsonp("/api/users.json?callback=JSON_CALLBACK"); 


口 config( 可 选 ， 对象 ) 

这 是 一 个 可 选 的 设置 对 象 。 

jsonp() 方 法 返回 HttpPromise 对 象 。 
5. post() 

这 是 用 来 发 送 POST 请 求 的 快捷 方式 。 
post( ) 函数 可 以 接受 三 个 参数 。 

口 url (字符 串 ) 

一 个 绝对 或 相对 路 径 的 URL， 代 表 请 求 的 目的 地 。 
口 gata (对 象 或 字符 串 ) 

这 个 对 象 包含 请 求 的 数据 。 

D config( 可 选 ， 对象 ) 

这 是 一 个 可 选 的 设置 对 象 。 

post( ) 方 法 返回 HttpPromise 对 象 。 





6. put() 

这 是 用 来 发 送 PUT 请 求 的 快捷 方式 。 

put() 函数 可 以 接受 三 个 参数 。 

口 url (字符 串 ) 

一 个 绝对 或 相对 路 径 的 URL， 代 表 请 求 的 目的 地 。 
口 data (对 象 或 字符 串 ) 

这 个 对 象 包含 请 求 的 数据 。 

D config( 可 选 ， 对象 ) 

这 是 一 个 可 选 的 设置 对 象 。 

put() 方 法 返回 HttpPromise 对 象 。 





15.2 ”设置 对 象 


当 我 们 将 $http 当 作 函 数 来 调用 时 ， 需 要 传 入 一 个 设置 对 象 ， 用 来 说 明 如 何 构 造 XHR 对 象 。 
例如 ， 可 以 像 下 面 这 样 将 $http 当 作 函 数 来 调用 : 


$http( { 
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method: "CET ' ， 
url: '/api/users.json', 


params: { 
'USername': 'auser' 
} 
}); 
设置 对 象 可 以 包含 以 下 键 。 


1. method 〈 字 符 串 ) 


这 个 键 是 我 们 希望 发 送 的 请 求 的 HTTP 方 法 。 它 的 值 是 下 列 各 项 其 中 之 一 :'GET' DELETE”、 
‘HEAD’、‘JSONP’、‘POST’、‘PUT’。 








2. url (字符 串 ) 
绝对 或 相对 的 URL， 是 请 求 的 目标 。 
3. params 〈 字 符 串 map 或 对 象 ) 


这 个 键 的 值 是 一 个 字符 串 map 或 对 象 ， 会 被 转换 成 查询 字符 串 追 加 在 URL 后 面 。 如 果 值 不 是 
字符 串 ， 会 被 JSON 序 列 化 。 
// 参数 会 转化 为 ?name=ari 的 形式 


$http({ 
params: { name': 'ari'} 














}) 
4. data 〈 字 符 串 或 对 象 ) 
这 个 对 象 中 包含 了 将 会 被 当 作 消息 体 发 送 给 服务 器 的 数据 。 通 常 在 发 送 POST 请 求 时 使 用 。 
从 AngularJS 1.3 开 始 ， 它 还 可 以 在 POST 请 求 里 发 送 二 进 制 数据 。 要 发 送 一 个 blob 对 象 ， 你 
可 以 简单 地 通过 使 用 data 参 数 来 传递 它 。 例 如 : 
var blob = new Blob(['Hello World'], {type: 'text/plain'}); 
$nhttp( { 
method: "POST ' ， 
UL 
data: blob 
直入 
5. headers (对 象 ) 
一 个 列表 ， 每 一 个 元 素 都 是 一 个 函数 ， 它 会 返回 代表 随 请 求 发 送 的 HTTP 头 。 如 果 函 数 的 返 
回 值 是 nul1 ， 对 应 的 头 不 会 被 发 送 。 
6. xsrfHeaderName (字符 串 ) 
保存 XSFR 令 牌 的 HTTP 头 的 名 称 。 
7. xsrfCookieName (字符 串 ) 
保存 XSFR 令 牌 的 cookie 的 名 称 。 
8.transformRequest (函数 或 函数 数组 ) 


这 是 一 个 函数 或 函数 数组 ， 用 来 对 HTTP 请 求 的 请 求 体 和 头 信息 进行 转换 ， 并 返回 转换 后 的 
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版 本 。 通 常用 于 在 请 求 发 送 给 服务 器 之 前 对 其 进行 序列 化 。 
这 个 函数 看 起 来 是 这 样 的 : 
function(data,headers) {} 
9. transformResponse 《函数 或 函数 数组 ) 


这 是 一 个 函数 或 函数 数组 ， 用 来 对 HTTP 响 应 的 响应 体 和 头 信息 进行 转换 ， 并 返回 转换 后 的 
版 本 。 通 常用 来 进行 反 序列 化 。 


这 个 函数 看 起 来 是 这 样 的 : 

function(data,headers) {} 

10. cache 《布尔 型 或 缓存 对 象 ) 

如 果 cache 属 性 被 设置 为 true , 那么 AngularJS 会 用 默认 的 $http 绥 存 来 对 GET 请 求 进行 缓存 。 
如 果 cache 属 性 被 设置 为 一 个 $cacheFactory 对 象 的 实例 ， 那 么 这 个 对 象 会 被 用 来 对 GET 请 求 进 
行 缓存 。 


11. timeout (数值 型 或 promise 对 象 ) 


如 果 timeout 被 设置 为 一 个 数值 ， 那 么 请 求 将 会 在 推迟 timeout 指 定 的 毫秒 数 后 再 发 送 。 如 
果 被 设置 为 一 个 promise 对 象 ， 那 么 当 该 promise 对 象 被 resolve 时 请 求 会 被 中 止 。 
















































































12. withCredentials (布尔 型 ) 

如 果 该 属性 被 设置 为 true ， 那 么 XHR 请 求 对 象 中 会 设置 withcredentials 标 记 。 

默认 情况 下 ，CORS 请 求 不 会 发 送 cookie ， 而 withcredentials 标 记 会 在 请 求 中 加 入 
Access-Control-Allow-Credentials 头 ， 这 样 请 求 就 会 将 目标 域 的 cookie 包 含 在 请 求 中 。 




















13. responseType 〈 字 符 串 ) 


responseType 选 项 会 在 请 求 中 设置 XMLHttpRequestResponseType 属 性 。 我 们 可 以 使 用 以 下 
HTTP 请 求 类 型 其 中 之 一 : 
"《 字 符 串 ， 默 认 ); 
"arraybuffer" (ArrayBuffer ); 
"blob" (blob 对 象 ); 
"document" (HTTP 文档 ); 
"json" (从 JSON 对 象 解析 而 来 的 JSON 字 符 串 ); 
"text" (字符 串 ); 
"moz-blob" (Firefox 的 接收 进度 事件 ); 
"moz-chunked-text" (文本 流 ); 


"moz-chunked-arraybuffer" (ArrayBuffer 流 )。 








口 








DOODOOOODODODOC 


15.3 ”响应 对 象 
AngularJS 传 递 给 then( ) 方 法 的 响应 对 象 包含 四 个 属性 。 
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口 data (字符 串 或 对 象 ) 

这 个 数据 代表 转换 过 后 的 响应 体 ( 如 果 定 义 了 转换 的 话 )。 
口 status (数值 型 ) 

向 应 的 HTTP 状 态 码 。 

口 headers (函数 ) 














这 个 函数 是 头 信 息 的 getter 函 数 ， 可 以 接受 一 个 参数 ， 用 来 获取 对 应 名 字 的 值 。 例 如 ， 用 如 
下 代码 获取 X-Auth-ID 的 值 : 
$http({ 
method: "GET ' ， 
url: '/api/users.json’' 
}).then (resp) { 
// 读 取 X-Auth-ID 


resp .headers( 'X-Auth-ID' ) ; 
}); 


口 config (对 象 ) 
这 个 对 象 是 用 来 生成 原始 请 求 的 完整 设置 对 象 。 
口 statusText (字符 串 ) 


这 个 字符 串 是 响应 的 HTTP 状 态 文本 。 








15.4 缓存 HTTP 请 求 


默认 情况 下 ，$http 服 务 不 会 对 请 求 进 行 本 地 缓存 。 在 发 送 单独 的 请 求 时 ， 我 们 可 以 通过 向 
$http 请 求 传人 一 个 布尔 值 或 者 一 个 缓存 实例 来 启用 缓存 。 

$http.get('/api/users.json',{ cache: true }) 

.Success(function(data) {}) 

.error(function(data) {}); 

第 一 次 发 送 请 求 时 , $http 服 务 会 向 /api/users.json 发 送 一 个 GET 请 求 。 第 二 次 发 送 同 一 个 GET 
请 求 时 ，$http 服 务 会 从 缓存 中 取 回 请 求 的 结果 ， 而 不 会 真 的 发 送 一 个 HTTP GET 请 求 。 


在 这 个 例子 里 ， 由 于 设置 了 启用 缓存 ，AngularJS 默 认 会 使 用 $cacheFactory, 这 个 服务 是 
AngularJS 在 启动 时 自动 创建 的 。 

















OO 更 多 关于 使 用 AngularJS 缓 存 的 内 容 ， 请 查看 第 28 章 。 








如 果 想 要 对 AngularJS 使 用 的 缓存 进行 更 多 的 自 定 义 控制 ， 可 以 向 请 求 传人 一 个 自 定义 的 组 
存 实例 代 蔡 true。 


例如 ， 如 果 要 使 用 LRU (Least Recenlty Used， 最 近 最 少 使 用 ) 缓存 ， 可 以 像 下 面 这 样 传人 
绥 存 实例 对 象 : 


var 1lru = $cacheFactory('lru',{ 
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capacity: 20 
站 
// $http 请 求 
$http.get('/api/users.json', { cache: lru }) 
.success(function(data){}) 


.error(function(data){}); 
现在 ,最 新 的 20 个 请 求 会 被 缓存 。 第 21 个 请 求 会 导致 [RU 从 缓存 中 将 时 间 比 较 老 的 请 求 移 除 掉 。 








每 次 发 送 请 求 时 都 传人 一 个 自 定 义 缓存 是 很 麻烦 的 事情 ( 即使 是 在 服务 中 )。 可 以 通过 应 用 
的 .config( ) 函数 给 所 有 $http 请 求 设置 一 个 默认 的 缓存 : 


angular .module( 'myApp', []) 
.config(function($httpProvider, $cacheFactory) { 


$httpProvider .defaults.cache = $cacheFactory('lru', { 
capacity: 20 
小 


1 
现在 ， 所 有 的 请 求 都 会 使 用 我 们 自 定义 的 LRU 缓 存 了 。 








15.5 ”拦截 器 
任何 时 候 如 果 我 们 想 要 为 请 求 添加 全 局 功能 , 例如 身份 验证 、 错 误 处 理 等 ， 在 请 求 发 送 给 服 
务 器 之 前 或 者 从 服务 器 返回 时 对 其 进行 拦截 ， 是 比较 好 的 实现 手段。 
例如 对 于 身份 验证 ， 如 果 服务 器 返回 401 状 态 码 ， 我 们 会 希望 将 用 户 重 定向 到 登录 页 面 。 
AngularJS 通 过 拦截 器 提供 了 一 个 从 全 局 层面 对 响应 进行 处 理 的 途径 。 
来 向 应 用 的 业务 流 


拦截 器 ， 尽 管 名 字 听 起 来 很 路 人 ， 实 际 上 是 $http 服 务 的 基础 中 间 件 ， 月 
息 )， 通过 向 $httpProvider. 















































程 中 注入 新 的 逻辑 。 
拦截 器 的 核心 是 服务 工厂 (查看 第 14 章 获得 更 多 关于 服务 的 信 
interceptors 数 组 中 添加 服务 工厂 ， 在 $httpProvider 中 进行 注册 。 


一 共有 四 种 拦截 咒 ， 两 种 成 功 拦截 器 ， 两 种 失败 拦截 需 。 











DQ request 
AngularJS 通 过 $http 设 置 对 象 来 对 请 求 拦 截 器 进行 调用 。 它 可 以 对 设置 对 象 进行 修改 , 或 者 创建 
一 个 新 的 设置 对 象 ， 它 需要 返回 一 个 更 新 过 的 设置 对 象 ， 或 者 一 个 可 以 返回 新 的 设置 对 象 的 promise。 








[由 

















DQ response 
AngularJS 通 过 $http 设 置 对 和 象 来 对 响应 拦截 器 进行 调用 。 它 可 以 对 响应 进行 修改 ,或 者 创 到 
一 个 新 的 响应 ， 它 需要 返回 一 个 更 新 过 的 响应 ， 或 者 一 个 可 以 返回 新 响应 的 promise。 


DQ requestError 


AngularJS 会 在 上 一 个 请 求 拦截 器 抛 出 错误 ,或 者 promise 被 reject 时 调用 此 拦截 器 。 


DQ responseError 


AngularJS 会 在 上 一 个 响应 拦截 器 抛 出 错误 ,或 者 promise 被 reject 时 调用 此 拦截 右 。 
尊重 版 权 
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调用 模块 的 . factory( ) 方 法 来 创建 拦截 器 ， 可 以 在 服务 中 添加 一 种 或 多 种 拦截 器 : 


angular.module( 'myApp', [|]) 
.factory('myInterceptor', function($q) { 
var interceptor = { 
'request': function(config) { 
// 成 功 的 请 求 方法 
return config; // 或 者 $q.when(config); 
5 
'response': function(response) { 
// 响应 成 功 
return response; // 或 者 $q.when(config); 
} 
'requestError': function(rejection) { 
// 请 求 发 生 了 错误 ， 如 果 能 从 错误 中 恢复 ， 可 以 返回 一 个 新 的 请 求 或 promise 
return response; // 或 新 的 promise 
// 或 者 ， 可 以 通过 返回 一 个 rejection 来 阻止 下 一 步 
// return $q.reject(rejection); 


5 


'responseError': function(rejection) { 
// 请 求 发 生 了 错误 ， 如 果 能 从 错误 中 恢复 ， 可 以 返回 一 个 新 的 响应 或 promise 
return rejection; // 或 新 的 promise 
// 或 者 ， 可 以 通过 返回 一 个 rejection 来 阻止 下 一 步 
// return $q.reject(rejection); 
} 
人 
return interceptor; 


}); 
我 们 需要 使 用 $httpProvider 在 .config( ) 销 数 中 注册 拦截 右 : 


angular .module( 'myApp', [|]) 
.config( function($httpProvider) { 
$httpProvider.interceptors.push('myInterceptor'); 


}); 


15.6 ”设置 $httpProvider 


使 用 .config() 可 以 向 所 有 请 求 中 添加 特定 的 HTTP 头 , 这 非常 有 用 , 尤其 是 我 们 希望 将 身份 
验证 的 头 同 请 求 一 同 发 送 ， 或 设置 响应 类 型 的 时 候 。 
默认 的 请 求 头 保存 在 $httpProvider .defaults .headers .common 对 象 中 。 默 认 的 头 如 下 所 示 ; 








高 
Accept: application/json, text/plain, x*/* 


通过 .config( ) 消 数 可 以 对 这 些 头 进行 修改 或 扩充 ， 如 下 所 示 : 





angular.module( 'myApp', [|]) 
.config(function($httpProvider) { 
$httpProvider .defaults.headers 
.common['X-Requested-By'] = 'MyAngularApp'; 


] 5 
也 可 以 在 运行 时 通过 $http 对 象 的 defaults 属 性 对 这 些 默 认 值 进行 修改 。 例 如 ， 通 过 如 下 方 


法 可 以 动态 添加 一 个 头 : 


$http .defaults 
.common['X-Auth'] = 'RandomString';.、 
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这 个 功能 可 以 通过 使 用 请 求 转换 器 实现 , 对 于 单个 请 求 , 也 可 以 通过 设置 $http 
请 求 的 headers 选 项 实现 。 





也 可 以 只 对 POST 和 PUT 类 型 的 请 求 进行 设置 。POST 请 求 的 默认 头 如 下 所 示 : 


Content-Type: application/json 


可 以 在 .config() 函 数 中 对 POST 请 求 的 头 进行 修改 或 扩充 ， 如 下 所 示 : 


angular .module( 'myApp', []) 
.config(function($httpProvider) { 
$httpProvider .defaults.headers 
.post['X-Posted-By'] = 'MyAngularApp ' ; 
}); 


也 可 以 对 所 有 的 PUT 请 求 做 同样 的 设置 。PUT 请 求 的 默认 头 如 下 所 示 : 





Content-Type: application/json 


可 以 在 .config() 函 数 中 对 PUT 请 求 的 头 进 行 修改 或 扩充 ， 如 下 所 示 : 





angular.module('myApp'，[]) .config(function($httpProvider ){ 
$httpProvider .defaults.headers 
.put['X-Posted-By'] = 'MyAngularApp ' ; 


}); 


15.7 ”使 用 $resource 

AngularJS 还 提供 另外 一 个 非常 有 用 的 可 选 服务 $resource 供 我 们 使 用 。 这 个 服务 可 以 创建 一 
个 资源 对 象 ， 我 们 可 以 用 它 非常 方便 地 同 支持 RESTful 的 服务 端 数 据 源 进行 交互 ， 当 同 支持 
RESTful 的 数据 模型 一 起 工作 时 ， 它 就 派 上 用 场 了 。 








OO REST 是 Representational State Transfer (表征 状态 转移 ) 的 缩写 ， 是 服务 器 用 来 
智能 化 地 提供 数据 服务 的 一 种 方式 。 更 多 关于 REST 的 信息 可 以 查看 维基 百科 "。 


$resource 服 务 难以 置信 地 方便 ， 它 对 很 多 复杂 的 细节 进行 了 抽象 ， 只 留 下 同 后 端 服务 器 进 
行 真 正 有 意义 的 交互 ， 前 提 是 服务 器 支持 RESTful 的 数据 模型 。 


$resource 服 务 可 以 将 $http 请 求 转换 成 save 和 update 等 简单 形式 ,我 们 可 以 通过 $resource 
服务 来 处 理 复杂 的 细节 ， 而 无 需 自己 编写 重复 和 繁琐 的 业务 代码 。 


























15.8 安装 


ngResource 模 块 是 一 个 可 选 的 AngularJS 模 块 ， 支 持 与 RESTful 的 后 端 数 据 源 进行 交互 。 由 于 
ngResource 模 块 没有 默认 内 置 在 AngularJS 中 ， 因 此 我 们 需要 安装 并 在 应 用 中 引用 它 。 


首先 需要 从 code.angularjs.org” 上 下 载 它 ， 然 后 放 到 一 个 类 似 于 js/vendorangular-resource.js 这 





GD http://en.wikipedia.org/wiki/Representational State Transfer 
© http://code.angularjs.org 
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样 的 地 方 ， 使 其 可 以 在 HTML 页 面 中 被 引用 。 


同样 也 可 以 使 用 Bower 来 进行 安装 , 这 样 它 会 被 安装 到 Bower 的 组 件 目录 中 。 更 多 关于 Bower 
的 信息 ， 请 查看 34.6 节 。 


$ bower install --save angular-Tesouce 
这 个 模块 需要 在 AngularJS 之 后 进行 引用 。 


<script src="js/vendor/angular.js">»</script> 
<Script src="js/vendor/angular-resource.js">»> </script> 


最 后 ， 需 要 在 我 们 的 应 用 中 将 ngResource 当 作 依 赖 进行 引用 : 





angular.module( 'myApp', ['ngResource']) 


现在 可 以 使 用 $resource 服 务 了 。 


15.9 ”应 用 $resource 


$resource 服 务 本 身 是 一 个 创建 资源 对 象 的 工厂 。 返 回 的 $jresource 对 象 中 包含 了 同 后 端 服 
务 器 进行 交互 的 高 层 API。 








var User = $resource('/api/users/:userld.json’', 


{ 
}userId: '@id' 


] ) ; 

$resource 返 回 包含 了 几 个 默认 动作 的 资源 类 对 象 。 可 以 把 user 对 象 理解 成 同 RESTful 的 后 
端 服务 进行 交互 的 接口 。 

资源 类 对 象 本 身 包含 的 方法 可 以 同 后 端 服务 进行 简洁 的 交互 。 

默认 情况 下 ， 这 个 对 象 包含 了 五 个 常用 的 方法 ,可 以 同 资源 集合 进行 交互 ， 或 者 创建 资源 对 
象 的 实例 。 它 会 生成 两 个 基于 HTTP GET 类 型 的 方法 ， 以 及 三 个 非 GET 类 型 的 方法 。 








15.9.1 基于 HTTP GET 方 法 

两 个 HTTP GET 类 型 的 方法 可 以 接受 下 面 三 个 参数 。 

口 params (对象 ) 

随 请 求 一 起 发 送 的 参数 。 它 们 可 以 是 URL 中 的 具名 参数 ， 也 可 以 是 查询 参数 。 
口 successFn ( 函数 ) 

当 HTTP 响 应 成 功 时 的 回调 函数 。 

口 errorFn ( 函数 ) 

当 HTTP 响 应 非 成 功 时 的 回调 函数 。 























1.get(params, successFn, errorFn) 


get 方 法 向 指定 URL 发 送 一 个 GET 请 求 ， 并 期 望 一 个 JSON 类 型 的 响应 。 
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像 上 面 那样 不 定义 具体 的 参数 ，get( ) 请 求 通常 被 用 来 获取 单个 资源 。 


// 发 起 一 个 请 求 : 
// GET /api/users 
User.get(function(resp) { 
// 处 理 响应 成 功 
}, function(err) { 
// 处 理 错误 


如 果 参 数 中 传人 了 具名 参数 〈 我 们 例子 中 的 参数 是 id )， 那 么 get( ) 方 法 会 向 包含 id 的 URL 
发 送 请 求 : 


// 发 起 一 个 请 求 : 
// GET /api/users/123 
User .get({ 
id: "123 
}, function(resp) { 
// 处 理 响应 成 功 
}, function(err) { 
// 处 理 错 误 
})3 




















2. query(params, successFn, errorFn) 
query 向 指定 URL 发 送 一 个 GET 请 求 ， 并 期 望 返回 一 个 JSON 格 式 的 资源 对 象 集合 。 


// 发 起 一 个 请 求 : 

// GET /api/users 

User .query(function(users) { 
// 读 取 集 合 中 第 一 个 用 户 
var user = users[0] 


}); 
query() 和 get() 方 法 之 间 唯 一 的 区 别 是 AngularJS 期 望 query( ) 方 法 返回 数组 。 




















15.9.2 ”基于 非 HTTP GET 类 型 的 方法 
三 个 基于 非 HTTP GET 类 型 的 方法 可 以 接受 下 面 四 个 参数 。 
口 params (对 象 ) 
随 请 求 一 起 发 送 的 参数 。 它 们 可 以 是 URL 中 的 具名 参数 ， 也 可 以 是 查询 参数 。 
口 postData ( 对象 ) 
这 个 对 象 是 随 请 求 发 送 的 数据 体 。 
口 successFn ( 函数 ) 
当 HTTP 响 应 成 功 时 的 回调 函数 。 
口 errorFn ( 函数 ) 
当 HTTP 响 应 非 成 功 时 的 回调 函数 。 




















1. save(params, payload, successFn, errorFn) 


save 方 法 向 指定 URL 发 送 一 个 POST 请 求 ， 并 用 数据 体 来 生成 请 求 体 。save( ) 方 法 用 来 在 服 
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务 咒 上 生成 一 个 新 的 资源 。 


// POST /api/users 
// with the body {name: 'Ari'} 
User.save({}, { 
name: 'Ari' 
}, function(response) { 
// 处 理 响应 成 功 
}, function(response) { 
// 处 理 非 成 功 响应 
}); 


2.delete(params, payload, successFn, errorFn) 


delete 方 法 会 向 指定 URL 发 送 一 个 DELETE 请 求 ， 并 用 数据 体 来 生成 请 求 体 。 它 被 用 来 在 服 
务 右 上 删除 一 个 实例 : 


// DELETE /api/users 
User.delete({}, { 
id: "123" 
}, function(response) { 
// 处 理 成 功 的 删除 响应 
}, function(response) { 
// 处 理 非 成 功 的 删除 响应 
}); 


3. remove(params, payload, successFn, errorFn) 


remove 方 法 和 delete( ) 方 法 的 作用 是 完全 相同 的 ， 它 存在 的 意义 是 因为 delete 是 JavaScript 
的 保留 字 ， 在 下 浏览 器 中 会 导致 额外 的 问题 。 
// 发 起 一 个 请 求 : 
// DELETE /api/users 
User.remove({}, { 
id: '123' 
}, function(response) { 
// 处 理 成 功 的 删除 响应 
}, function(response) { 
// 处 理 非 成 功 的 删除 响应 
有 


15.9.3 $resource 实 例 


上 述 方法 返回 数据 时 ， 响 应 会 被 一 个 原型 类 所 包装 ， 并 在 实例 上 添加 一 些 有 用 的 方法 。 5 
实例 对 象 上 会 被 添加 下 面 三 个 实例 方法 : 


口 $save() 
口 $remove( ) 
口 $delete() 














除非 在 一 个 单独 的 资源 上 而 不 是 一 个 集合 上 被 调用 , 否则 这 三 个 方法 与 资源 上 对 应 的 方法 是 
一 样 的 [ea 
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这 三 个 方法 可 以 在 资源 实例 上 被 调用 。 如 下 所 示 : 


// 使 用 实例 方法 $save( ) 

User.get({id: '123'}, function(user) { 
user.name = 'Ari'; 
user.$save(); // Save the user 


3 


// This is equivalent to the collection-level 
// resource call 
User.save({id: '123'}, {name: 'Ari'}); 


15.9.4 $resource 实 例 是 异步 的 

需要 格外 注意 ， 这 三 个 方法 在 调用 时 $resource 对 象 会 立即 返回 一 个 空 的 数据 引用 。 由 于 所 
有 方法 都 是 异步 执行 的 ， 所 以 这 个 数据 是 一 个 空 的 引用 ， 并 不 是 真实 的 数据 。 

因此 ， 虽然 获取 实例 的 调用 看 起 来 是 同步 的 ， 但 实际 上 不 是 。 事 实 上 ， 它 只 是 数据 的 引用 ， 
当 数 据 从 服务 器 返回 后 AngularJS 会 自动 将 数据 填充 进去 。 



























































hl 





// $scope.user 将 为 空 
$scope.user = User.get({id: '123'}); 


这 些 方法 也 提供 了 回调 函数 ， 在 数据 返回 时 按 预 期 的 方式 调用 : 
User.get({id: '123'}, function(user) { 


$scope.user = user; 


.5 


15.9.5 ”附加 属性 
$resource 集 合 和 实例 有 两 个 特殊 的 属性 用 来 同 底层 的 数据 定义 进行 交互 。 








口 $promise (promise ) 


$promise 属 性 是 为 $resource 生 成 的 原始 promise 对 象 。 这 个 属性 是 特别 用 来 同 $routeProvider . 
when( ) 在 resolve 时 进行 连接 的 。 
如 果 请 求 成 功 了 ， 资源 实例 或 集合 对 象 会 随 promise 的 resolve 一 起 返回 。 如 果 请 求 失败 了 ， 
promise 被 resolve 时 会 返回 HTTP 响 应 对 象 ， 其 中 没有 resource 属 性 。 
口 $resolved ( 布尔 型 ) 
$resolved 属 性 在 服务 器 首次 响应 时 会 被 设置 为 true (无 论 请 求 是 否 成 功 )。 





























15.10” 自 定义 $resource 方法 

尽管 $resource 服 务 提供 了 五 种 方法 供 我 们 使 用 ,但 它 本 身 也 具有 良好 扩展 性 ， 我 们 可 以 用 
自 定义 方法 对 资源 对 象 进行 扩展 。 

为 了 在 $resource 对 象 中 创建 自 定义 方法 ， 需 要 向 包含 修改 过 的 $http 设 置 对 象 的 资源 类 传 
入 第 三 个 参数 ， 它 被 当 作 自 定义 方法 。 
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在 这 个 对 象 中 ， 键 是 方法 的 名 称 ， 值 是 $http 设 置 对 象 。 


var User = $resource('/api/users/:userld.json', { 
UserId: '@id' 
sendEmail: { 
method: 'POST' 
上 
allInboxes: { 
method: 'JSONP', 
isArray: true 
} 
}93 


借助 这 个 User 资 源 ， 资 源 集 合 (User 资 源 对 象 ) 中 的 个 体 实例 现在 可 以 使 用 sendEmail( ) 和 
update( ) 方 法 了 (也 就 是 user .$sendEmail() 和 user.$update() )。 





15.11 $resource 设置 对 象 


$resource 设 置 对 象 和 $http 设 置 对 象 十 分 相似 ， 仅 有 少量 的 不 同 。 
对 象 中 的 值 ， 也 就 是 动作 ， 是 资源 对 象 中 某 个 方法 的 名 字 。 

它 可 以 包含 以 下 键 。 

1. method 〈 字 符 串 ) 


methodq 指 的 是 我 们 想 要 用 来 发 送 HTTP 请 求 的 方法 。 它 必须 是 以 下 值 之 一 :'GET' DELETE”、 
‘JSONP’、‘POST’、‘PUT’。 








2. url 《字符 串 ) 

一 个 URL， 用 来 覆盖 为 该 方法 的 具体 路 由 设置 的 URL。 

3. params 《字符 串 map 或 对 象 ) 

这 个 键 中 包含 了 此 动作 可 选 的 预 绑 定 参 数 。 如 果 任 何 一 个 值 都 是 函数 , 那么 每 当 我 们 需要 读 
取 一 个 请 求 的 参数 时 ， 它 就 会 被 执行 一 次 。 

4. isArray 《布尔 型 ) 

如 果 isArray 被 设置 为 true， 那 么 这 个 动作 返回 的 对 象 会 以 数组 的 形式 返回 。 

5. transformRequest (函数 或 函数 数组 ) 


这 个 函数 或 函数 数组 用 来 对 HTTP 请 求 的 请 求 体 和 头 信息 进行 转换 ， 并 返回 转换 后 的 版 本 。 
通常 用 来 进行 序列 化 。 











var User = $resource('/api/users/:id',{ 
id: '@' 
}, { 
sendEmail: { 
method: "PUT ' ， 
transformRequest: function(data, headerFn) { 
// 返回 修改 后 的 请 求 数据 
return JSON.stringify(data); 
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]) 
6. transformResponse (函数 或 函数 数组 ) 


这 个 函数 或 函数 数组 用 来 对 HTTP 响 应 体 和 头 信息 进行 转换 ， 并 返回 转换 后 的 版 本 。 通 常用 
来 进行 反 序 列 化 。 


var User = $resource('/apiVusers/:id' ，,{ 
id: '@' 
二 
sendEmail: { 
method: 'PUT', 
transformResponse: function(data, headerFn) 
{ 
// Return modified data for the response 
return JSON.parse(data); 





} 
}); 


7. cache (布尔 型 或 缓存 对 象 ) 

如 果 cache 属 性 被 设置 为 true， 那 么 AngularJS 会 用 默认 的 $http 缓 存 对 GET 请 求 进行 缓存 。 
如 果 cache 属 性 被 设置 为 $cacheFactory 对 象 的 一 个 实例 ， 那 么 这 个 对 象 会 用 来 对 GET 请 求 进行 
缓存 。 

如 果 cache 属 性 被 设置 为 false， 那 么 gresource 服 务 所 发 送 的 请 求 不 会 被 缓存 。 

8. timeout 〈 数 值 型 或 promise 对 象 ) 


如 果 timeout 被 设置 为 一 个 数值 ， 那 么 请 求 将 会 在 推迟 timeout 指 定 的 毫秒 数 后 再 发 送 。 如 
果 被 设置 为 一 个 promise 对 象 ， 那 么 当 该 promise 对 和 象 被 resolve 时 ， 请 求 会 被 中 止 。 


















































9. withCredentials (布尔 型 ) 
如 果 该 属性 被 设置 为 true， 那 么 XHR 请 求 对 象 中 会 设置 withCredentials 标 记 。 


默认 情况 下 ， CORS RI De Sookie 而 withCredentials 标 记 会 在 请 求 中 加 入 Access- 
Control-Allow-Credentials 头 ， 这 样 请 求 就 会 携带 日 标 域 的 cookie。 























10. responseType 〈 字 符 串 ) 


responseType 选 项 会 在 请 求 中 设置 XMLHttpRequestResponseType 属 性 。 我 们 可 以 使 用 以 下 
HTTP 请 求 类 型 之 一 : 


口 "" (字符 串 ， 默认 ); 

"arraybuffer" (ArrayBuffer ); 

"blob" (blob 对 象 ); 

"document"( HTTP 文档 ); 

"json" (从 JSON 对 象 解析 而 来 的 JSON 字 符 串 ); 
"text" (字符 串 ); 

"moz-blob" (Firefox 的 接收 进度 事件 ); 
"moz-chunked-text" (文本 流 ); 














DOOOODO 
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口 "moz-chunked-arraybuffer" (ArrayBuffer 流 )。 
11. interceptor (对 象 ) 


拦截 器 属性 有 两 个 可 选 的 方法 : response 或 responseError。 这 些 拦截 器 像 普通 的 $http 拦 
截 器 一 样 ， 由 $http 请 求 对 象 调用 。 





15.12 $resource 服务 


我 们 可 以 将 $resource 服 务 当 作 自 定义 服务 的 基础 。 创 建 自 定义 服务 给 了 我 们 对 应 用 进行 高 
度 自 定 义 的 能 力 ， 可 以 对 远程 服务 通信 进行 抽象 ， 并 且 从 控制 器 和 视图 中 解 耦 出 来 。 

最 后 ， 我 们 强烈 建议 在 自 定义 的 服务 对 象 内 部 使 用 $resource。 这 不 仅 可 以 将 加 载 远 程 服 务 
抽象 成 一 个 独立 的 AngularJS 服 务 ， 同 时 将 其 从 控制 器 中 解 耘 ， 保 证 控制 器 的 代码 清洁 。 另 外 ， 
还 使 得 我 们 可 以 不 必 关 心 控制 器 是 如 何 取得 数据 的 。 

AngularJS 对 象 内 部 的 这 种 解 耘 方式 同样 对 测试 有 益 ， 因 为 我 们 可 以 将 后 端 请 求 的 结果 进行 
储存 和 模拟 ， 而 不 用 担心 在 测试 时 真 的 会 将 请 求 发 送 给 后 端 。 

要 创建 一 个 封装 $resource 的 服务 ， 需 要 将 $resource 的 服务 注入 到 我 们 用 来 封装 的 服务 对 
象 中 ， 并 像 平 时 一 样 调 用 其 中 的 方法 。 

如 下 所 示 : 


angular .module( 'myApp', ['ngResource']) 
.factory('UserService', [ 
'$resource', function($resource) { 





























return $resource('/api/users/:id', { 
id: '@' 

}, { 
update: { 

method: "PUT 

} 

1 

}1); 


$resourceAPI 

通过 $resource( ) 方 法 来 使 用 $resource 服 务 。 这 个 方法 可 以 接受 三 个 参数 。 

口 url1 (字符 串 ) 

我 们 在 这 里 传人 一 个 包含 所 有 参数 的 ， 用 来 定位 资源 的 参数 化 URL 字 符 串 模 板 〈 参数 以 : 符 15 
号 为 前 级 )。 对 URL 中 的 每 个 参数 ， 都 可 以 通过 它们 的 名 字 来 为 其 赋值 : 

$resource('/api/users/:id.:format', { 


format: 'json', 
id: “128” 





3 
这 里 需要 注意 ， 如 果 : 之 前 的 参数 是 空 的 (上 面 例子 中 的 :iq )， 那 么 URL 中 的 这 部 分 会 被 压 
缩 成 一 个 .符号 。 
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如 果 我 们 使 用 的 服务 器 要 求 在 URL 中 输入 端口 号 , 例如 http://localhost:3000， 
我 们 必须 对 URL 进 行 转 义 。 这 种 情况 下 URL 规 则 看 起 来 是 这 样 的 : 


$resource( 'http://localhost\\:3000/api/users/:id.json')。 


口 paramDefaults (可 选 ， 对 象 ) 

第 二 个 参数 中 包含 了 发 送 请 求 时 URL 中 参数 的 默认 值 。 对 象 中 的 键 会 与 参数 名 进行 匹配 。 如 
果 我 们 传人 了 一 个 没有 在 URL 中 设置 过 的 参数 ， 那 它 会 以 普通 的 查询 字符 串 的 形式 被 发 送 。 

例如 ， 如 果 URL 字 符 串 具有 /apiVusers/:iqd 这 样 的 签名 ， 并 且 我 们 将 默认 值 设 置 为 {id: 
'123'，name: 'Ari' }， 那 么 URL 最 终 会 被 转换 成 /api/users/123?name=Ari。 

这 里 可 以 像 上 面 一 样 硬 编码 一 个 默认 值 来 传人 一 个 静态 值 , 也 可 以 设置 它 从 一 个 数据 对 象 中 
读 取 动态 值 。 
如 果 要 设置 动态 值 ， 需 要 在 值 之 前 加 上 @ 字 符 作为 前 级 。 
口 actions (可 选 ， 对 象 ) 
动作 对 象 是 具有 自 定义 动作 ， 并 且 可 以 对 默认 的 资源 动作 进行 扩展 的 hash 对 象 。 
在 这 个 对 象 中 ， 对 象 的 键 就 是 自 定 义 动 作 的 名 字 ， 而 $http 设 置 对 象 的 值 会 对 URL 中 相应 的 
































参数 进行 替换 。 
例如 ， 我 们 可 以 用 如 下 形式 在 资源 上 定义 一 个 新 的 update 动 作 : 





$resource('/api/users/:id.:format', { 
format: 'json', 
id: "123 
Fz 4 
update: { 
method: "PUT 
} 
}9y 


15.13 ”使 用 Restangular 
尽管 AngularJS 本 身 非常 强大 ， 可 通过 将 所 有 的 重要 数据 打包 在 应 用 内 部 而 形成 一 个 独立 的 


应 用 ,但 这 样 就 会 错过 这 个 框架 最 优秀 的 功能 之 一 : 和 外 部 世界 通信 的 能 力 。 


本 节 会 深入 讨论 一 个 非常 不 可 思议 的 、 设 计 良 好 的 库 : 








Restangular。 





15.14 ”Restangular 简介 


Restangular 是 一 个 专门 用 来 从 外 部 读 取 数据 的 AngularJS 服 务 。 
为 什么 不 用 $http 或 $resource? 尽管 $http 和 $resource 是 AngularJS 的 内 置 服务 , 但 这 两 个 
服务 在 某 些 方面 的 功能 是 有 限 的 。Restangular 通 过 完全 不 同 的 途径 实现 了 XHR 通 信 , 并 提供 了 良 


好 的 使 用 体验 。 








尊重 版 权 
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使 用 Restangular 能 带 来 的 所 有 好 处 在 Restangular 的 README 文件 中 都 有 详细 说 明 ， 这 里 我 
们 简单 介绍 几 个。 
1. promise 


Restangular 支 持 promise 模 式 的 异步 调用 ， 使 用 起 来 更 符合 AngularJS 的 习惯 。 可 以 像 使 用 原 
始 的 $http 方 法 一 样 对 啊 应 进行 链 式 操作 。 


2. promise 展 开 
也 可 以 像 使 用 $resource 服 务 一 样 使 用 Restangular, 通过 很 简单 的 方式 同时 操作 promise 和 对 象 。 
3. 清晰 明了 


Restangular 库 儿 乎 没有 复杂 或 神奇 的 东西 ,无 需 通 过 猜测 或 研究 文档 就 可 以 知道 它 是 如 何 工 
作 的 。 


4. 全 HTTP 方 法 支持 
Restangular 文 持 所 有 的 HTTP 方 法 。 
5. 忘记 URL 


$resource 要 求 明 确 的 指定 想 要 拉 取 数据 的 URL，Restangular 并 不 需要 事先 知道 URL 或 提前 
指定 它们 〈 除 基础 URL 外 )。 


6. 资源 榜 套 

Restangular 可 以 直接 处 理 符 套 的 资源 ， 无 需 创 建新 的 Restangular 实 例 。 

7. 一 个 实例 

同 $resource 不 同 ， 使 用 过 程 中 仅 需 要 创建 一 个 Restangular 资 源 对 象 的 实例 。 























15.15 安装 Restangular 


要 方便 地 安装 Restangular， 有 多 个 不 同 的 选择 。 可 以 手动 从 GitHub? 下载 文 件 ， 保 存 到 本 地 
后 在 页 面 中 引用 。 如 果 本 地 保存 路 径 为 js/vendor 目 录 ，HTML 中 应 该 像 下 面 这 样 引入 这 个 文件 : 





<script type="test/javascript" src="js/vendor/restangular.min.js"></script> 
也 可 以 在 页 面 中 引用 托管 在 jsDelivr 上 的 JavaScript 库 文件 : 


<ScTipt type="text/javascript" 
src="http://cdn.jsdelivr.net/restangular/latest/restangular.js">»></script> 

<script type="text/javascript" 
src="http://cdn.jsdelivr.net/restangular/latest/restangular.min.js"></script> 


如 果 项 目 中 使 用 了 npm， 也 可 以 通过 npm 来 安装 Restangular: 





$ npm install restangular 





GD https://github.com/mgonto/restangular 
© https://raw.github.com/jimaek/jsdelivr/master/files/restangular/latest/restangular.min.js 
@® http:/www.jsdelivr.com/ 
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当然 如 果 项 目 中 使 用 了 Bower， 也 可 以 用 Bower 来 安装 : 


$ bower install restangular 


Restangular 依 赖 Lo-Dash 或 Underscore， 因 此 为 了 确保 Restangular 可 以 正常 运行 ， 
需要 引入 这 两 个 库 中 的 一 个 。 





如 果 通 过 Bower 安 装 Restangular，Lo-Dash 会 同时 被 自动 下 载 。 
否则 ， 可 以 通过 jsDelivr" 来 引用 1o0dash: 





<script type="text/javascript" 
src="//cdn.jsdelivr.net/lodash/2.1.0/1o0dash.compat .min.js"> 
</script> 


也 可 以 从 http:/lodash.com/ 上 下 载 Lo-Dash 或 通过 Bower 安 装 它 
bower install--savelodash 


然后 在 页 面 里 引用 脚本 : 


<script type="text/javascript" 
src="/js/vendor/1lodash/dist/1lodash.min.js">¢/script> 


同 其 他 的 AngularJS 库 一 样 ， 我 们 需要 将 restangular 资 源 当 作 依 赖 加 载 进 应 用 模块 对 象 。 





angular .module( 'myApp', ['restangular']); 

完成 后 ， 就 可 以 将 Restangular 服 务 注 入 到 AngularJS 对 象 中 : 
angular .module( 'myApp', []) 

.factory('UserService', ['Restangular', function(Restangular) { 


// 现在 我 们 已 经 在 UserService 中 访问 了 Restangular 
}]); 


15.16 ”Restangular 对 象 简介 
通过 Restangular 有 两 种 方式 创建 拉 取 数据 的 对 象 。 可 以 为 拉 取 数据 的 对 象 设 置 基础 路 由 : 

















var User = Restangular .all('users ' ); 


这 样 设置 Restangular 服 务 会 让 所 有 的 HTTP 请 求 将 masers 路 径 作为 根 路 径 来 拉 取 数据 。 例 如 ， 
调用 上 述 对 象 的 getList( ) 方 法 会 从 msers 拉 取 数 据 : 


var allUsers = User.getList(); // GET /users 


当然 也 可 以 通过 单个 对 象 来 发 送 奶 套 的 请 求 ， 可 以 用 唯一 的 ID 来 代替 路 由 发 送 请 求 : 




















var oneUser = Restangular.one('users', 'abc123'); 


上 面 代 码 的 效果 是 调用 oneUser 上 的 get( ) 时 向 /users/abc123 发 送 请 求 。 





oneUser .get().then(function(user) { 





GD http://www.jsdelivr.com/#!lodash 
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// GET /users/abc123/inboxes 
user .getList('inboxes'); 


}); 


从 上 面 可 以 看 出 ，Restangular 非 常 聪明 ， 知 道 如 何 根据 在 Restangular 源 对 象 上 调用 的 方法 来 
构造 URL。 但 设置 拉 取 数据 的 URL 是 很 方便 的 ， 特 别 是 当 后 端 不 支持 纯粹 的 RESTful API 时 。 


通过 向 allur1 方 法 传人 一 个 独立 的 参数 来 指定 请 求 的 URL: 


// 搜索 的 所 有 URL 都 将 使 用 
// ‘http://goo0ogle.com/“asthebaseUrl 
var searches = 

Restangular.allUrl('one', 'http://goo0gle.com/'); 
// 将 发 送 一 个 请 求 到 GET http://google.com/ 
searches.getList(); 


男 外 也 可 以 通过 oneURL 方 法 针对 特定 的 请 求 ， 设 置 基 础 URL 而 不 是 操作 整个 请 求 : 

















var singleSearch = 
Restangular .oneUrl('betaSearch', 'http://beta.google.com/1'); 





// 和 触发 一 个 请 求 到 GET http://google.com/1 
singleSearch.get(); 


15.17 使 用 Restangular 
现在 我 们 已 经 可 以 操作 Restangular 对 象 了 ， 下 面 我 们 来 用 它 发 送 请 求 吧 。 
当 Restangular 将 初始 化 的 对 象 返回 给 我 们 后 , 可 以 通过 几 种 不 同 的 方法 与 后 端 API 进 行 交 互 。 
假设 我 们 创建 了 一 个 Restangular 对 象 代 表 公共 讨论 列表 : 





var messages = Restangular.all('messages ' ); 


通过 这 个 对 象 ， 可 以 使 用 getList() 来 获取 所 有 信息 。getList() 方 法 返回 了 一 个 集合 ， 其 
中 包含 了 可 以 用 来 操作 特定 集合 的 方法 。 

// 所 有 消息 都 是 一 个 将 被 resolve 成 所 有 消息 列表 的 promise 

var allMessages = messages.getList(); 

同样 可 以 使 用 Restangular 对 象 来 创建 信息 。 使 用 post( ) 方 法 来 创建 nessage 对 象 。 

post 方 法 可 以 接受 一 个 必要 参数 ， 参 数 类 型 是 对 象 ， 并 向 指定 的 URL 发 送 一 个 POST 请 求 。 
我 们 也 可 以 向 请 求 中 添加 查询 参数 和 头 。 

// POST 到 /messages 


var newMessage = { 
body: 'Hello world' 

















}; 
messages .post(newMessage ) ; 

// 或 者 我 们 将 在 一 个 元 素 上 调用 这 个 函数 
// 以 创建 谋 套 的 资源 


var message = Restangular.one('messages', 'abc123'); message.post('replies', newMessage); 


由 于 Restangular 返 回 promise 对 象 ， 我 们 可 以 调用 promise 对 象 上 的 方法 ， 因 此 我 们 可 以 在 
promise 对 象 完成 时 运行 函数 。 
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Restangular 返 回 的 是 增强 过 的 promise 对 象 , 因此 除了 可 以 调用 then 方 法 , 还 可 以 调用 一 些 特 
殊 的 方法 ， 比 如 $object。$object 会 立即 返回 一 个 空 数 组 (或 对 象 ) 在 服务 器 返回 信息 后 ， 数 
组 会 被 用 新 的 数据 填充 。 这 对 更 新 一 个 集合 后 ， 在 作用 域 中 立即 重新 拉 取 集合 的 场景 很 有 用 : 

















// 然后 在 promise 中 调用 
messages.post(newMessage) .then(function(newMsg){ 
// 首先 将 消息 设置 成 空 数组 
// 然后 一 旦 getList 是 完整 的 就 填充 它 
$scope.messages = messages.getList().$object; 
}, function(errorReason) 
// 出 现 了 一 个 错误 
1 


我 们 也 可 以 从 集合 中 移 除 一 个 对 象 。 使 用 remove( ) 方 法 可 以 发 送 一 个 DELETE HTTP 请 求 给 
后 端 。 通 过 调用 集合 中 一 个 对 象 ( 或 元 素 ) 的 remove( ) 方 法 来 发 送 删除 请 求 。 

















var message = messages .get(123 ) ; 
message.Tremove(); // 发 送 DELETE HTTP 请 求 


更 新 和 储存 对 象 是 常见 的 操作 。 通 常情 况 下 ， 这 种 操作 由 HTTP PUT 方法 完成 。Restangular 
通过 put( ) 方 法 来 支持 这 个 功能 。 

要 更 新 一 个 对 象 , 首先 要 查询 这 个 对 象 , 然后 在 实例 中 设置 新 的 属性 值 , 再 调用 对 象 的 put() 
方法 将 更 新 保存 到 后 端 。 

注意 ,在 修改 一 个 对 象 之 前 对 其 进行 复制 ， 然 后 对 复制 的 对 象 进行 修改 和 保存 是 一 

个 好 做 法 。Restangular 有 自己 的 复制 版 本 ， 因 此 无 需 对 一 系列 方法 重新 进行 绑 定 。 在 更 

新 对 象 时 使 用 Restangular.copy() 是 一 个 比较 好 的 实践 。 

现在 我 们 已 经 了 解 了 如 何 操作 和 集合 中 的 实例 , 下 面 详 细 介 绍 骨 套 资源 。 骸 套 资源 是 指 包含 在 
其 他 组 件 内 部 的 组 件 。 例 如 ， 一 个 特定 作者 所 写 过 的 所 有 书籍 。 

Restangular 默 认 支 持 散 套 资源 。 事 实 上 ， 我 们 可 以 从 集合 中 查询 出 特定 的 般 套 资源 实例 。 






































var author = Restangular.one('authors', 'abc123'); 

// 构建 一 个 GET 到 /authors/abc123/books 的 请 求 

var books = author.getList('books'); 

Restangular 中 另外 一 个 酷 炫 的 功能 是 不 仅 可 以 在 one 和 al1 方 法 创造 的 对 象 上 调用 post 、put 、 
getList 等 方法 ， 也 可 以 在 服务 器 返回 的 对 象 上 上 调用。 例如， 我 们 可 以 在 代码 中 首先 拉 取 一 个 作 
者 并 进行 展示 ， 然 后 获取 他 的 书籍 列表 : 


Restangular .one('authors', 'abc123').then(function(author) { 
$scope.author = author; 


下 











// 然后 在 代码 中 将 

// 构建 一 个 GET 到 /authors/abc123/authors 的 请 求 
// 使 用 $scope.author ， 它 是 从 服务 器 返回 的 真实 对 象 
$scope.author .getList('books ' ) ; 


15.17.1 ”我 的 HTTP 方 法 们 怎么 办 


Restangular 支 持 所 有 的 HTTP 方 法 。 它 支持 GET、PUT、POST、DELETE、HEAD、TRACE、 
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OPTIONS 和 PATCH。 


author .get(); // GET/authors/abc123 

author .getList('books' );// GET/authors/abc123/books 
author .put(); // PUT/authors/abc123 

author .post(); // POST/authors/abc123 

author .remove(); // DELETE/authors/abc123 

author .head( ); // HEAD/authors/abc123 

author .trace(); // TRACE/authors/abc123 

author .options(); // OPTIONS/authors/abc123 

author .patch(); // PATCH/author/abc123 


如 果 后 端 服务 器 映射 资源 的 方式 和 我 们 预期 的 不 符 ，Restangular 也 支持 自 定 义 HTTP 方 法 。 


例如 ， 如 果 我 们 想得到 作者 的 传记 (不 是 RESTful 资 源 )， 可 以 使 用 customMETHOD( ) 函数 设 
置 URL (METHOD 可 以 被 下 面 的 方法 替代 : GET、GETLIST、DELETE、POST、PUT、HEAD、 
OPTIONS、 PATCH、 TRACE ): 

// 映射 一 个 GET 到 /users/abc123/biography 的 请 求 

author .customGET("biography"); 

// 或 者 带 有 一 个 新 Dio 对 象 的 POST 

// as {body: "Ari's bio"} 

// 中 间 的 两 空 字段 是 

// 参数 字段 或 任意 自 定 义 头 部 

author .customPOST({fboqy: 'Ari\'s Bio'},// post body 

"biography"，// 路 由 
{0 // 自 定义 参数 
Cy) // 自 定义 头 部 


15.17.2” 自 定义 查询 参数 和 头 


每 一 个 HTTP 方 法 都 可 以 自 定义 查询 参数 和 头 。 

为 了 添加 自 定义 查询 参数 , 需要 添加 一 个 JavaScript 对 象 , 将 其 作为 第 二 个 参数 添加 到 我 们 的 
方法 调用 中 , 还 可 以 再 添加 一 个 JavaScript 对 象 作为 第 三 个 参数 。 最 重要 的 是 , 在 资源 上 调用 这 些 
方法 会 将 这 两 个 参数 作为 可 选 参数 。 

使 用 了 自 定义 查询 参数 ， 一 个 post 方 法 看 起 来 像 这 样 : 


Var queryParamO0bj = { role: 'admin' }, 
headerO0bj = { 'x-user': 'admin' }; 








messages .getList('accounts' ，queryParam0bj，headerObj ) ; 


Restangular 使 用 起 来 难以 置信 地 方便 ， 因 此 我 们 可 以 集中 精力 在 构建 应 用 上 ， 而 不 需要 和 这 
些 API 较 劲 。 











15.18 设置 Restangular 


Restangular 具 有 高 度 的 可 定制 性 ， 可 以 根据 应 用 的 需要 进行 相应 的 设置 。 每 个 属性 都 有 默认 
值 ， 所 以 我 们 也 无 需 在 不 必要 的 情况 下 对 其 进行 设置 。 


Restangular 可 以 在 儿 个 不 同 的 地 方 进行 设置 ， 比 如 全 局 或 自 定 义 服 务 中 。 
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将 RestangularProvider 注 人 到 config( ) 也 数 中 ,或 者 将 Restangular 注 入 到 一 个 run( ) 函 
数 中 ， 用 这 些 方 式 对 Restangular 进 行 设置 ， 无 论 在 哪里 使 用 Restangular 都 可 以 利用 这 些 设置 。 








一 个 决定 在 何 处 设置 Restangular 实 例 的 好 方法 : 如 果 设 置 Restangular 时 需要 用 到 其 
他 服务 ， 那 么 就 在 run( ) 方 法 中 设置 ， 否 则 就 在 config() 中 进行 设置 。 
1. 设置 baseUr1l 


通过 setBaseUr1() 方 法 给 所 有 后 端 API 请 求 设 置 baseUr1。 例 如， 如 果 API 的 地 址 是 
/api/vi 而 不 是 服务 器 的 根 路 径 ， 可 以 进行 如 下 设置 : 




















angular.module('myApp'，['restangular ']) 
.config(function(RestangularProvider) { 
RestangularProvider .setBaseUr1l('/api/v1 ' ) 


}); 
2. 添加 元 素 转 换 
Restangular 加 载 了 资源 之 后 ， 我 们 可 以 添加 资源 转换 器 。 
使 用 elementTransformers 可 以 在 Restangular 对 象 被 加 载 后 为 其 添加 自 定义 方法 。 
这 个 方法 会 在 资源 被 加 载 后 当 作 回 调 函 数 调 用 ， 在 AngularJS 对 象 中 使 用 这 些 资源 前 可 以 对 
资源 对 象 进 行 更 新 或 修改 。 


angular .module( 'myApp', ['restangular']) 
.config(function(RestangularProvider) { 
// 3 个 参数 : 
// route 
// 如 果 它 是 一 个 集合 一 一 布尔 值 (true/false) 或 者 
// 如 果 你 需要 这 两 个 选项 以 及 变换 器 
// 则 不 发 送 
RestangularProvider.addElementTransformer('authors', false, function(element) { 
element. fetchedAt = new Date(); 
return element; 
}); 
}); 


对 于 扩展 数据 模型 或 集合 有 跨 界 方 法 可 以 使 用 。 例 如 ， 如 果 我 们 只 想 更 新 authors 资 源 ， 可 
以 用 如 下 方法 : 


angular .module( 'myApp', ['restangular']) 
.config(function(RestangularProvider) { 
// 3 个 参数 : 
// route 
// 如 果 它 是 一 个 集合 一 一 布尔 值 (true/false) 或 者 
// 如 果 你 需要 这 两 个 选项 以 及 变换 器 
// 则 不 发 送 
RestangularProvider .extendModel( 'authors'，function(element) { 
element .getFullName = function() { 
return element .name + ' ' + element.1lastName; 























已 
return element; 


}); 
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3. 设置 responseInterceptors 





Restangular 可 以 设置 响应 拦截 器 responseInterceptors 在 需要 对 服务 需 返 回 的 啊 应 进行 转 


换 时 非常 有 有 用。 例如， 如 果 服 务 器 返回 的 数据 将 我 们 需要 的 数据 藏 在 了 让 套 资源 中 ， 可 以 用 
responseInterceptors 把 这 些 数据 挖 出 来 。 





OO getList 方 法 始终 返回 数组 是 非常 重要 的 ,如 果 响 应 中 包含 带 有 元 信息 和 吝 套 数 
组 的 对 象 ， 我 们 应 该 用 responseInterceptors 把 它 解 析出 来 。 





responseInterceptors 在 每 个 响应 从 服务 器 返回 时 被 调用 。 调 用 时 会 传人 以 下 参数 。 
口 data: 从 服务 器 取 回 的 数据 。 

口 operation: 使 用 的 HTTP 方 法 。 

口 wnat: 所 请 求 的 数据 模型 。 

Durl1: 请 求 的 相对 URL。 

口 response: 完整 的 服务 器 响应 ， 包 括 响 应 头 。 

口 deferred: 请 求 的 promise 对 象 。 





Ny 


如 ， 下 面 的 设置 会 使 getList() 返 回 一 个 带 有 元 信息 的 数组 ， 在 这 种 情况 下 ， 数 组 中 的 元 
素 就 是 同 路 由 具有 相同 名 称 的 属性 的 值 。 例 如 ， 向 /customers 发 送 GET 请 求 会 返回 一 个 像 
{customers: []} 这 样 的 数组 。 




















angular .module( 'myApp', ['restangular']) 
.config(function(RestangularProvider) { 
RestangularProvider .setResponseInterceptor( function(data 
if (operation == 'getList') { 
var list = data[lwhat]; 
list.metadata = data.metadata.; 
return list; 


, operation, what) { 


} 
return data; 
}); 
3 


4. 使 用 request Interceptors 


Restangular 同 样 还 支持 另外 一 种 对 应 的 操作 : 我 们 可 以 在 将 数据 实际 发 送 给 服务 器 之 前 对 其 
进行 操作 。 
如 果 要 在 将 对 象 发 送 给 服务 器 之 前 对 其 进行 操作 , 那么 requestInterceptors 非 常 有 用 。 例 


如 ， 我 们 可 以 直接 用 _id 字 段 同 MongoDB 进 行 通 信 ， 所 以 在 使 用 PUT 操作 将 其 发 送 回 服务 器 之 前 
需要 把 这 个 字段 移 除 。 




















小 提示 : 我 们 可 以 同时 使 用 requestInterceptors 和 responseInterceptors 来 实现 全 页 面 
范围 内 的 加 载 提 示 。 在 每 个 请 求 之 前 开始 加 载 提 示 ， 在 收 到 请 求 后 停止 加 载 提 示 。 


使 用 setRequestInterceptor() 来 设置 requestInterceptor 。 这 个 方法 可 以 接受 下 面 四 个 
数 。 
口 element : 发 送 给 服务 器 的 资源 ，; 
口 operation: 所 使 用 的 HTTP 方 法 ; 


Wp 
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口 what: 所 请 求 的 数据 模型 ; 
所 请 求 的 相对 URL。 
angular .module( 'myApp', ['restangular']) 
config(function(RestangularProvider) { 
RestangularProvider .setRequestInterceptor( function(elem, operation, 





DQ url: 
what) { 


=== "put"') { 


if (operation 
elem._id = undefined; 


return elem; 


} 


return elem; 
}); 
}); 
5. 自 定义 字段 
nn ee et ys 同 MongoDB 数 据 库 进行 通 
这 种 场景 中 iq 字 段 不 会 映射 到 真 的 id 上 , 在 MongoDB 中 id 字段 实际 上 会 映射 到 _id.$oidq 上 。 


信 9 
angular .module( 'myApp', ['restangular']) 
config(function(RestangularProvider) { 
RestangularProvider .setRestangularFields({ 
id: '_id.$oid' 
}); 
上 
6. 通过 errorInterceptors 来 捕获 错误 
通过 errorInterceptor 可 以 将 错误 信息 


通过 设置 错误 拦截 器 可 以 捕获 Restangular 内 的 错误 
在 应 用 中 进行 传递 。 
回 false ,promise 链 就 会 


如 果 errorInterceptor 返 


理 错误 。 
例如 , 此 时 是 处 理 验证 失败 的 好 时 机 。 任 何 请 求 如 果 返 
将 用 户 重 定向 到 登录 页 


[ restangular ']) 























被 中 断 , 并 且 我 们 的 应 用 永远 都 不 需要 处 


过 errorInterceptor 





回 了 401, 可 以 通 














将 其 捕获 并 


angular.module('myApp ' ， 
config(function(RestangularProvider) { 
RestangularProvider .setErrorIinterceptor(function(resp) { 














displayError(); 
return false; // 停止 promise 链 
全 }); 
7. 孤立 资源 设置 
如 果 我 们 想 加 载 一 个 没有 内 套 在 其 他 资源 中 的 资源 


Restangular 不 要 构造 退 套 结构 的 URL。 
angular .module( 'myApp', ['restangular']) 
config(function(RestangularProvider) { 
RestangularProvider .setParentless(['cars']) 
上 
setParentless( ) 设 置 函数 可 以 接受 两 种 不 同类 型 的 参数 . 


可 以 使 用 setParentless 设 置 告诉 
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@ 布尔 型 
如 果 参 数值 为 true， 所 有 的 资源 都 会 被 当 作 孤立 资源 处 理 ， 没 有 任何 URL 会 进行 能 套 。 
@ 数组 


只 有 定义 在 这 个 数组 中 的 资源 会 当 作 孤立 资源 处 理 , 数组 的 元 素 是 字符 串 , 字符 串 的 值 是 资 
源 的 标识 。 

8. 使 用 超 媒体 

在 实践 中 ， 只 通过 一 个 切入 点 ( 主 URL ) 来 同 后 端 服务 器 进行 通信 是 非常 好 的 做 法 ， 其 他 数 
据 模型 通过 链接 来 指向 相关 联 的 资源 。 

Restangular 通 过 selfLink 、oneUr1 和 al1lUr1 来 支持 这 个 有 用 的 做 法 。 

首先 要 设置 selfLink 字 段 。 同 设置 非常 类 似 ，selfLink 将 路 径 设 置 为 数据 模型 的 一 个 属 
性 ， 而 数据 模型 通过 链接 同 对 应 的 资源 相关 联 。 这样 我 们 可 以 知道 应 该 将 PuT 或 6ET 请 求 发 送 到 明 
个 URL。 





























二 册 























angular.module( 'myApp', ['restangular']) 
.config(function(RestangularProvider) { 
RestangularProvider.setRestangularFields({ 
selfLink: 'link.href' 
Db 
I 
设置 好 后 ， 就 可 以 开始 使 用 这 个 非常 有 用 的 功能 
首先 读 取 所 有 作者 的 列表 ， 这 也 是 应 用 的 主 路 由 。 


$scope.authors = Restangular.all('authors ' ).getList().$object 


基于 前 面 的 设置 , 每 一 个 作者 都 对 应 一 个 指向 自己 的 链接 , 同样 还 有 一 个 指向 该 作者 对 应 的 
书籍 的 URL。 可 以 像 下 面 这 样 使 用 这 些 属性 : 











var firstAuthor = authors[0]; 
firstAuthor .name="John"; 


// PUT 到 /authors/1988-author-1 
// url 在 firstAuthor.1ink.href 中 
firstAuthor .put(); 


// GET 到 /books/for-author/1988-author-1 
var books = Restangular.allUrl('books', firstAuthor .books.href) 
.getList().$object; 


9. 自 定义 Restangular 服 务 

最 后 ， 强 烈 建议 将 Restangular 封 装 在 一 个 自 定 义 服务 对 象 内 。 这 样 做 非常 有 用 ， 因 为 在 每 个 
自 定 义 服务 中 都 可 以 对 Restangular 进 行 独立 的 设置 。 通 过 使 用 服务 可 以 将 同 服务 器 通信 的 逮 辑 与 
AngularJS 对 象 解 耦 ， 并 让 服务 直接 处 理 通 信 的 业务 。 

AngularJS 对 象 内 部 的 解 耦 同样 对 测试 非常 有 帮助 ， 因 为 我 们 在 测试 时 模拟 后 端 请 求 的 返回 
数据 ， 而 无 需 担 心 会 真 的 向 后 端 发 送 请 求 。 
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通过 将 Restangular 服 务 注入 到 工厂 函数 中 ， 就 可 以 方便 地 对 Restangular 进 行 封装 。 在 工 
厂 函 数 内 部 ， 使 用 withConfig( ) 函数 来 创建 自 定义 设置 。 
例如 : 
['restangular']) 
['Restangular', function(Restangular) { 


angular .module( 'myApp ' ， 
.factory( 'MessageService ' ， 


var restAngular = Restangular .withConfig(function(Configurer ) { 
Configurer .setBaseUrl('/api/v2/messages'); 


上 
= TestAngular .all('messages ' ) ; 


var _messageService 


return { 
getMessages: function() { 
return _messageService.getList(); 
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16.1 ” 跨 域 和 同 源 策 略 
浏览 器 在 全 局 层面 禁止 了 页 面 加 载 或 执行 与 自身 来 源 不 同 的 域 的 任何 脚本 。 
同 源 策略 允许 页 面 从 同一 个 站 点 加 载 和 执行 特定 的 脚本 。 浏 览 器 通过 对 比 每 一 个 资源 的 协议 、 
主机 名 和 端口 号 来 判断 资源 是 否 与 页 面 同 源 。 站 外 其 他 来 源 的 脚本 同 页 面 的 交互 则 被 严格 限制 。 
跨 域 资源 共享 ( Cross Origin Resource Sharing，CORS ) 是 一 个 解决 跨 域 问题 的 好 方法 ， 从 而 
可 以 使 用 XHR 从 不 同 的 源 加 载 数据 和 资源 。 
幸好 ， 除 CORS 以 外 还 有 几 个 方法 可 以 用 来 从 外 部 的 数据 源 将 数据 加 载 到 应 用 中 。 我 们 将 详 
细 介 绍 其 中 的 两 种 ,第 三 种 只 会 简要 介绍 ( 因为 它 需 要 服务 器 端的 额外 支持 ): 
DQ JSONP 


D CORS 
口 服务 器 代理 




















16.2 JSONP 


JSONP 是 一 种 可 以 绕 过 浏览 器 的 安全 限制 ， 从 不 同 的 域 请 求 数据 的 方法 。 使 用 JSONP 需 要 服 
务 器 端 提 供 必 要 的 支持 。 

JSONP 的 原理 是 通过 cscript， 标 签发 起 一 个 GET 请 求 来 取代 XHR 请 求 。JSONP 生 成 一 个 
<script> 标 签 并 插 到 DOM 中 ， 然 后 浏览 器 会 接管 并 向 src 属 性 所 指向 的 地 址 发 送 请 求 。 

当 服 务 器 返回 请 求 时 , 响应 结果 会 被 包装 成 一 个 JavaScript 函 数 , 并 由 该 请 求 所 对 应 的 回调 函 
数 调用 。 

AngularJS 在 $http 服 务 中 提供 了 一 个 JSONP 辅 助 函 数 。 通过 $http 服 务 的 jsonp 方 法 可 以 发 送 
请 求 ， 如 下 所 示 


$http 

.jsonp("https://api.github.com?callback=JSON_CALLBACK") .success(function(data) { 
// 数据 

}); 


当 请 求 被 发 送 时 ，AngularJS 会 在 DOM 中 生成 一 个 如 下 所 示 的 cscript> 标 签 : 
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<script src="https://api.github.com?callback=angular.callbacks._0" 
type="text/javascript"></script> 


注意 ，JSON_CALLBACK 被 蔡 换 成 了 一 个 特地 为 此 请 求生 成 的 自 定义 函数 。 


当 文 持 JSOPN 的 服务 胡 返 回 数据 时 ， 数 据 会 被 包装 在 由 AngularJS 生 成 的 具名 函数 
angular.callbacks._0 中 。 


在 这 个 例子 中 ，GitHub 服 务 器 会 返回 包含 在 回调 函数 中 的 JSON 数 据 ， 响 应 看 起 来 如 下 所 示 : 


// 简写 
angular.callbacks._0({ 
‘meta': { 
'X-RateLimit-Limit': '60', 
'status': 200 





}, 
‘data': { 
"current_user_ur1l': 'https://api.github.com/user' 
} 
}) 


当 AngularJS 调 用 指定 的 回调 函数 时 会 对 $http 的 promise 对 象 进行 resolve。 





罗兰 我 们 自己 开发 支持 JSONP 的 后 站 服务 时 ， 妥 确保 响应 的 吉 据 被 @ 合 在 请 求 所 
指定 的 回调 函数 中 。 





使 用 JSONP 需 要 意识 到 潜在 的 安全 风险 。 首 先 ， 服 务 器 会 完全 开放 ， 人 允许 后 端 服 务 调用 应 用 
中 的 任何 JavaScript。 

不 受 我 们 控制 的 外 部 站 点 ( 或 者 蓄意 攻击 者 ) 可 以 随时 更 改 脚本 , 使 我 们 的 整个 站 点 变 得 脆弱 。 
服务 器 或 中 间 人 有 可 能 会 将 额外 的 JavaScript 迎 辑 返回 给 页 面 ， 从 而 将 用 户 的 隐私 数据 暴露 出 来 。 

由 于 请 求 是 由 <script> 标 签发 送 的 , 所 以 只 能 通过 JSONP 发 送 GET 请 求 。 并 且 脚 本 的 异常 也 
很 难处 理 。 使 用 JSONP 一 定 要 谨慎 ， 同 时 只 跟 信 任 并 可 以 控制 的 服务 器 进行 通信 。 

















16.3 使 用 CORS 


近年 来 ，W3C 制 定 了 路 域 资源 共享 来 通过 标准 的 方式 取代 JSONP。 

CORS 规 范 简单 地 扩展 了 标准 的 XHR 对 象 ,以 允许 JavaScript 发 送 跨 域 的 XHR 请 求 。 它 会 通 ; 
预 检查 〈preflight ) 来 确认 是 否 有 权限 向 目标 服务 器 发 送 请 求 。 

预 检查 可 以 让 服务 器 接受 或 拒绝 来 自 全 部 服务 器 、 特 定 服务 器 或 一 组 服务 器 的 请 求 。 这 意味 
着 客户 端 和 服务 端 应 用 需要 协同 工作 ， 才 能 向 客户 端 或 服务 器 发 送 数据 。 

W3C 制 定 CORS 规 范 时 对 很 多 细节 进行 了 抽象 ， 并 使 其 对 客户 端 开 发 者 透明 ， 让 开发 者 可 以 
像 发 送 同 域 请 求 一 样 方便 地 发 送 跨 域 请 求 。 








[ei 











16.3.1 设置 


为 了 在 AngularJS 中 使 用 CORS， 首 先 需 要 告诉 AngularJS 我 们 正在 使 用 CORS。 使 用 config() 
方法 在 应 用 模块 上 设置 两 个 参数 以 达到 此 目的 。 
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首先 ， 告 诉 AngularJS 使 用 XDomain ， 并 从 所 有 的 请 求 中 把 X-Request-with 头 移 除 掉 。 
| X-Request-With 头 默认 就 是 移 除 掉 的 ， 但 是 再 次 确认 它 已 经 被 移 除 没有 坏处 。 


angular.module( 'myApp', [|]) 

.config( function($httpProvider) { 
$httpProvider .defaults.useXDomain = true; 
delete $httpProvider.defaults.headers 

.common['X-Requested-With']; 


7 
现在 可 以 发 送 CORS 请 求 了 。 


16.3.2 ”服务 器 端 CORS 支 持 


尽管 这 一 章 不 深究 服务 端 CORS 的 设置 (第 18 章 才 会 深入 讨论 )， 但 是 确保 服务 器 支持 CORS 
是 很 重要 的 。 


支持 CORS 的 服务 右 必 须 在 响应 中 加 入 几 个 访问 控制 相关 的 头 。 


DQ Access-Control-Allow-Origin 








这 个 头 的 值 可 以 是 与 请 求 头 的 值 相 呼 应 的 值 ， 也 可 以 是 x*， 从 而 允许 接收 从 任何 来 源 发 来 的 请 求 。 

口 Access-Control-Allow-Credentials ( 可 选 ) 

默认 情况 下 ，CORS 请 求 不 会 发 送 cookie。 如 果 服 务 器 返回 了 这 个 头 ， 那 么 就 可 以 通过 将 
withCredentials 设 置 为 true 来 将 cookie 同 请 求 一 同 发 送出 去 。 


如 果 将 $http 发 送 的 请 求 中 的 withcredentials 设 置 为 true ， 但 服务 器 没有 返回 Access- 
Control-Allow-Credentials ， 请 求 就 会 失败 ， 反 之 亦 然 。 


后 端 服务 器 必须 能 处 理 OPTIONS 方 法 的 HTTP 请 求 。 
CORS 请 求 分 为 简单 和 非 简单 两 种 类 型 。 





16.3.3 ”简单 请 求 


如 果 请 求 使 用 下 面 一 种 HTTP 方 法 就 是 简单 请 求 : 
口 HEAD; 

口 GET; 

口 POST。 





如 果 请 求 除了 下 面 列 表 中 的 一 个 或 多 个 HTTP 头 以 外 ， 没 有 使 用 其 他 头 : 
口 Accept; 





DQ Accept-Language ; 
口 Content-Language ; 
口 Last-Event-ID ; 
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口 Content-Type; 


m application/X-www-form-urlencoded; 
m multipart/form-data; 
m text/plain。 


我 们 把 这 类 请 求 归 类 为 简单 请 求 ， 因 为 浏览 器 可 以 不 需要 使 用 CORS 就 发 送 这 类 请 求 。 简 单 
请 求 不 要 求 浏览 絮 和 服务 器 之 间 有 任何 的 特殊 通信 。 


一 个 使 用 $http 服 务 的 简单 CORS 请 求 和 其 他 简单 请 求 看 起 来 是 下 面 这 样 的 : 


$http 
.get("https://api.github.com") 
.success(function(data) { 

// 数据 
起 











16.3.4 非 简单 请 求 

不 符合 简单 请 求 标 准 的 请 求 被 称 为 非 简单 请 求 。 如 果 想 要 支持 PUT 或 DELETE 方 法 ， 又 或 者 
求 设 置 特殊 的 内 容 类 型 ， 就 需要 发 送 非 简单 请 求 。 

尽管 这 些 请 求 在 客户 端 开 发 者 看 来 没什么 不 同 ， 但 浏览 器 会 以 不 同 的 方式 处 理 它们 。 


浏览 需 实际 上 会 发 送 两 个 预 请 求 和 请 求 。 浏览 器 首先 会 向 服务 右 发 送 预 请 求 来 获得 发 
送 请 求 的 许可 ， 只 有 许可 通过 了 ， 浏 览 器 才 会 发 送 真 正 的 请 求 。 


浏览 器 处理 CORS 的 过 程 是 透明 的 。 
同 简单 请 求 一 样 ， 浏 览 器 会 给 预 请 求 和 请 求 都 加 上 Origin 头 。 
预 请 求 
浏览 器 发 送 的 预 请 求 是 OPTIONS 类 型 的 ， 预 请 求 中 包含 以 下 头 信息 : 
口 Access-Control-Request-Method 
这 个 头 是 请 求 所 使 用 的 HTTP 方 法 ， 会 始终 包含 在 请 求 中 。 
口 Access-Control-Request-Headers ( 可 选 ) 
这 个 头 的 值 是 一 个 以 逗号 分 隔 的 非 简单 头 列表 ， 列 表 中 的 每 个 头 都 会 包含 在 这 个 请 求 中 。 


服务 器 必须 接受 这 个 请 求 ， 然 后 检查 HTTP 方 法 和 头 的 合法 性 。 如 果 通 过 了 检查 ， 服 务 咒 会 
在 啊 应 中 添加 下 面 这 个 头 : 


口 Access-Control-Allow-Origin 
这 个 头 的 值 必 须 和 请 求 的 来 源 相 同 ， 或 者 是 * 符 号 ， 以 允许 接受 来 自任 何 来 源 的 请 求 。 
口 Access-Control-Allow-Methods 


这 是 一 个 可 以 接受 的 HTTP 方法 列表 ， 对 在 客户 端 缓存 响应 结果 很 有 帮助 ， 并 且 未 来 发 送 的 
请 求 可 以 不 必 总 是 发 送 预 请 求 。 


想 给 i 
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口 Access-Control-Allow-Headers 
如 果 设 置 了 Access-Control-Request-Headers 头 ， 服 务 器 必须 在 响应 中 添加 同一 个 头 。 


我 们 希望 服务 器 在 可 以 接受 这 个 请 求 时 返回 200 状 态 码 。 如 果 服 务 需 返回 了 200 状 态 码 , 真正 
的 请 求 才 会 发 出 o 











CORS 并 不 是 一 个 安全 机 制 , 只 是 现代 浏览 器 实现 的 一 个 标准 。 在 应 用 中 设置 安 
全 策略 依然 是 我 们 的 责任 。 





AngularJS 中 的 非 简单 请 求 与 普通 请 求 看 起 来 没有 什么 区 别 : 
$http 

.delete("https://api.github.com/api/users/1") 
.Success(function(data) { 


// 数据 
}); 


16.4 ”服务 器 端 代理 

实现 向 所 有 服务 器 发 送 请 求 的 最 简单 方式 是 使 用 服务 器 端 代理 。 这 个 服务 器 和 页 面 处 在 同一 
个 域 中 (或 者 不 在 同一 个 域 中 但 支持 CORS )， 做 为 所 有 远程 资源 的 代理 。 

可 以 简单 地 通过 使 用 本 地 服务 器 来 代替 客户 端 向 外 部 资源 发 送 请 求 , 并 将 响应 结果 返回 给 客 
户 端 。 

通过 这 种 方式 ， 老 式 浏览 器 不 必 使 用 需要 发 送 额 外 请 求 的 CORS (只 有 现代 浏览 器 支持 
CORS ) 也 能 发 送 跨 域 请 求 ， 并 且 可 以 在 浏览 器 中 采用 标准 的 安全 策略 。 

为 了 实现 服务 器 端 代理 , 需要 架设 一 个 本 地 服务 器 来 处 理 我 们 所 有 的 请 求 , 并 负责 向 第 三 方 
发 送 实际 的 请 求 。 

更 多 关于 架设 服务 器 端 组 件 的 内 容 请 查看 第 18 章 。 























16.5 ”使 用 JSON 


JSON 是 JavaScript Object Notation 的 简写 ， 是 一 种 看 起 来 像 JavaScript 对 象 的 数据 交换 格式 。 
事实 上 ， 当 JavaScript 加 载 它 时 ， 它 确实 会 被 当做 一 个 对 象 来 解析 。AngularJS 也 会 将 所 有 以 JSON 
格式 返回 的 JavaScript 对 象 解析 为 一 个 与 之 对 应 的 Angular 对 象 。 


例如 ， 如 果 服 务 器 返回 以 下 JSON: 











"msg": "This is the first msg", state: 1}, 
'msg": "This is the second msg", state: 2}, 
"msg": "This is the third msg", state: 1}, 
"msg": "This is the fourth msg", state: 3} 


一 一 一 一 


当 AngularJS 通 过 $http 服 务 收 到 这 个 数据 后 , 可 以 像 普 通 JavaScript 对 象 那样 来 引用 其 中 的 
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数据 : 
$http.get('/vi/messages. json') 
.success(function(data, status) { 
$scope.first_msg = dqata[0] .msg; 


$scope. first_state = data[0] .state; 
上 


16.6 ”使 用 XML 

尽管 AngularJS 能 够 以 完全 透明 的 方式 来 处 理 从 服务 器 返回 的 RON 对 象 ， 我 们 同样 可 以 使 用 
其 他 的 数据 格式 。 

假如 服务 器 返回 的 是 XML 而 非 JSON 格 式 的 数据 ， 需 要 将 其 转换 成 JavaScript 对 象 。 


幸好 ， 有 不 少 出 色 的 开源 库 可 以 使 用 ,同样 ， 某 些 浏览 器 也 内 置 了 解析 器 ， 可 以 帮助 我 们 将 
XML 格式 转换 成 JavaScript 对 象 。 


在 这 里 我 们 以 X2JS 库 为 例 ， 这 是 一 个 非常 好 用 的 开源 库 ， 可 以 在 这 里 下 载 "。 
首选 需要 确保 安装 了 X2JS 库 ， 我 们 通过 Bower 来 安装 


$ bower install x2js 























然后 可 以 在 页 面 中 从 googlecode.com 或 我 们 自己 安装 的 Bower 组 件 中 引用 这 个 库 : 


<script type="text/javascript" 
src="https://x2js.googlecode.com/hg/xml2json.js"></script> 

<!1-- 或 者 --> 

<script type="text/javascript" 
src="bower_components/xml2json/xml2json.js">¢/script> 


创建 一 个 工厂 服务 以 开始 使 用 这 个 轻 量 的 XML 解析 器 , 这 个 服务 的 功能 很 简单 ,就 是 在 DOM 
中 解析 XML2 : 


angular.factory('xmlParser'，function() { 
var x2js = new X2JS(); 
return { 
xml2json: x2js.xml2json, 
json2xml: x2js.json2xml_str 
}s 
入 


借助 这 个 轻 量 的 解析 服务 ， 可 以 将 $http 请 求 返 回 的 XML 解析 成 JSON 格 式 ， 如 下 所 示 : 





angular. factory('Data', [$http, 'xmlParser', function($http, xmlParser) { 
$http.get('/api/msgs.xml', { 
transformResponse: function(data) { 
return xmlParser.xml2json(data); 





QD https://code.google.com/p/x2js/ 
加 解析 XML 和 DOM 没 什么 关系 。 一 一 译 者 注 
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现在 请 求 的 结果 被 转换 成 了 JSON 对 象 , 可 以 像 服务 器 本 来 返回 的 就 是 JSON 格 式 一 样 来 使 用 
这 个 对 象 。 


16.7 ”使 用 AngularJS 进行 身份 验证 

大 多 数 网 络 应 用 都 有 需要 保护 的 资源 , 这 些 资源 不 能 被 公开 访问 ,只 能 由 可 以 被 识别 且 信 任 
的 授权 用 户 访 问 。 这 些 资源 可 能 是 付款 信息 ， 也 可 能 是 管理 功能 。 

无 论 保护 的 资源 是 什么 ， 进 行 保护 的 手段 都 是 类 似 的 。 

如 何 实现 服务 器 端 身 份 验证 并 不 是 本 章 的 内 容 主旨 。 本 章 集中 介绍 服务 器 端 需要 做 什么 来 支 
持 前 端 实现 此 功能 。 

然后 会 介绍 如 何 实现 客户 端的 身份 验证 保护 ， 以 及 这 个 流程 中 的 一 些 边缘 情况 。 


























16.7.1 服务 器 端 需求 

首先 必须 保证 服务 器 端 API 的 安全 性 。 由 于 我 们 处 理 的 代码 是 未 编译 的 ， 且 可 能 是 由 不 信任 
的 源 发 送 的 ， 不 能 假设 所 有 的 用 户 都 聪明 到 可 以 认识 到 这 些 潜在 的 风险 。 

下 面 介绍 常 被 用 来 保护 客户 端 应 用 的 两 种 方法 。 

1. 服务 器 端 视图 泻 染 

如 果 站 点 所 有 的 HTML 页 面 都 是 由 后 端 服 务 器 处 理 的 ， 可 以 使 用 传统 的 授权 方式 ， 由 服务 器 
端 进行 鉴 权 ， 只 发 送 客户 端 需要 的 HTML。 

2. 纯 客户 端 身份 验证 


我 们 希望 客户 端 和 服务 端的 开发 工作 可 以 解 午 并 各 自 独 立 进行 , 且 可 以 将 组 件 独 立地 发 布 到 
生产 环境 中 ， 互 相 没 有 影响 。 因 此 ， 需 要 通过 使 用 服务 器 端 API 来 保护 客户 端 身份 验证 的 安全 ， 
但 并 不 依赖 这 些 API 来 进行 身份 验证 。 


通过 令 牌 授权 来 实现 客户 端 身份 验证 ， 服 务 骨 需要 做 的 是 给 客户 端 应 用 提供 授权 令 牌 。 
令 牌 本 里 是 一 个 由 服务 右 端 生成 的 随机 字符 串 , 由 数字 和 字母 组 成 , 它 与 特定 的 用 户 会 话 相关 联 。 
































OO uuid 库 是 用 来 生成 令 牌 的 好 选择 。 


当 用 户 登 录 到 我 们 的 站 点 后 , 服务 器 会 生成 一 个 随机 的 令 牌 , 并 将 用 户 会 话 同 令 牌 之 间 建 
关联 ， 用 户 无 需 将 ID 或 其 他 身份 验证 信息 发 送 给 服务 器 。 

客户 端 发 送 的 每 个 请 求 都 应 该 包含 此 令 牌 , 这 样 服务 器 才能 根据 令 牌 来 对 请 求 的 发 送 者 进行 
身份 验证 。 

服务 器 端 则 无 论 请 求 是 否 合法 ,都 会 将 对 应 事件 的 状态 码 返回 给 客户 端 , 这 样 客户 端 才能 做 
出 啊 应 。 


例如 ， 我 们 希望 服务 端 对 所 有 身份 验证 未 通过 的 请 求 都 返回 401 状 态 码 。 





Er 
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下 面 的 表格 中 是 一 些 常用 的 状态 码 : 
状 
































¢ 态 码 含义 
200 一 切 正常 
401 未 授权 的 请 求 
403 禁止 的 请 求 
404 页 面 找 不 到 
500 服务 器 错误 


当 客 户 端 收 到 这 些 状 态 码 时 会 做 出 相应 的 响应 。 

数据 流程 如 下 : 

(1) 一 个 未 经 过 身份 验证 的 用 户 浏 览 了 我 们 的 站 点 ; 

(2) 用 户 试图 访问 一 个 受 保护 的 资源 , 被 重 定 癌 到 登录 页 面 , 或 者 用 户 和 手动 访问 了 登录 页 面 ; 


(3) 用 户 输入 了 他 的 登录 ID ( 用 户 名 或 电子 邮箱 ) 以 及 密码 ， 接 着 AngularJS 应 用 通过 POST 
请 求 将 用 户 的 信息 发 送 给 服务 端 ; 


(4) 服务 端 对 ID 和 密码 进行 校 验 ， 检 查 它 们 是 否 匹 配 ; 


(5) 如 果 ID 和 密码 匹配 ， 服 务 端 生 成 一 个 唯一 的 令 牌 , 并 将 其 同一 个 状态 码 为 200 的 响应 一 起 
返回 。 如 果 ID 和 密码 不 匹配 ， 服 务 器 返回 一 个 状态 码 为 401 的 响应 。 


对 一 个 已 经 通过 身份 验证 的 用 户 ( 通过 了 上 面 5 个 步骤 的 用 户 )， 流 程 如 下 : 
(1) 用 户 请 求 一 个 受 保护 的 资源 路 径 ( 比如 他 自己 的 账号 页 面 ); 


(2) 如 果 用 户 尚未 登录 ， 应 用 会 将 他 重 定向 到 登录 页 面 。 如 果 用 户 登录 了 ， 应 用 会 使 用 该 会 
话 对 应 的 令 牌 来 发 送 请 求 ; 


(3) 服务 器 对 令 牌 进行 校 验 ， 并 根据 请 求 返 回合 适 的 数据 。 

































































16.7.2” 客户 端 身份 验证 
前 面 一 节 定义 了 身份 验证 机 制 需 要 处 理 的 一 些 行为 : 


口 重 定 向 未 经 过 身份 验证 的 页 面 请 求 ; 
口 捕获 所 有 响应 状态 码 非 200 的 XHR 请 求 ， 并 进行 相应 的 处 理 ; 
口 在 整个 页 面 会 话 中 持续 监视 用 户 的 身份 验证 情况 。 


为 了 对 未 通过 验证 的 用 户 访问 受 保护 资源 的 行为 进行 重 定向 , 需要 能 够 对 公共 资源 和 受 保 护 
资源 进行 区 分 。 


有 下 面 几 种 方法 可 以 将 路 由 定义 为 公共 或 非 公共 。 
1. 保护 API 访 问 的 资源 


如 果 想 要 对 一 个 会 发 送 受 保 护 的 API 请 求 ( 例如 , 一 个 服务 器 可 能 返回 401 状 态 码 的 APIT 请 求 ) 
的 路 由 进行 保护 ， 但 又 希望 可 以 正常 加 载 页 面 ， 可 以 简单 地 通过 $http 拦 截 右 来 实现 。 


想 要 创建 一 个 $http 拦 截 器 并 能 够 处 理 未 通过 身份 验证 的 API 请 求 ， 首 先 要 创建 一 个 拦截 需 
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来 处 理 所 有 的 响应 。 


现在 , 我 们 在 应 用 的 .config( ) 代 码 块 内 设置 $http 响 应 拦截 器 , 并 将 $httpProvider 注 入 
其 中 : 


angular.module('myApp'，[]) 

.config(function($httpProvider) { 
// 在 这 里 构造 拦截 器 

}); 


这 个 拦截 器 会 处 理 所 有 请 求 的 响应 以 及 响应 错误 。 


angular.module('myApp'，[]) 
.config(function($httpProvider) { 
// 在 这 里 构造 拦截 器 


var interceptor = function($q, $rootScope, Auth) { 


return { 
'response': function(resp) { 
if (resp.config.url == '/api/login') { 
// 假设 API 服 务 器 返回 的 数据 格式 如 下 : 
// { token: "AUTH_TOKEN" } 
Auth.setToken(resp.data.token); 
} 


return resp; 
}, 
'responseError': function(rejection) { 
// 错误 处 理 
switch(rejection.status) { 
case 401 : 
if (rejection.config.url!=='api/login') 
// 如 果 当 前 不 是 在 登录 页 面 
$rootScope.$broadcast('auth:loginRequired ' ) ; 
break 
case 403 : 
$rootScope.$broadcast( 'auth:forbidden ' ) ; 
break 
case 404: 
$rootScope.$broadcast( 'page:notFound ' ) ; 
break 
case 500 : 
$rootScope.$broadcast( 'server:error ' ) ; 
break 





} 


return $q.reject(rejection); 
上 
1 


这 个 授权 拦截 器 会 处 理 特定 请 求 中 一 些 可 预见 的 服务 器 响应 状态 码 。 当 拦截 器 捕获 到 401 状 
态 码 ， 会 通过 $broadcasts 从 $rootScope 开 始 向 所 有 的 子 作 用 域 广 播 此 事件 。 


另外 ， 拦 截 器 会 为 任何 返回 200 状 态 码 的 请 求 将 令 牌 保存 到 /apilogin 登 录 路 由 中 。 16 
为 了 实现 这 个 拦截 器 ， 需 要 让 $httpProvider 将 这 个 拦截 器 添加 到 拦截 需 链 中 : 























angular.module( 'myApp', [|]) 
.config(function($httpProvider) { 
// 在 这 里 构造 拦截 器 


var interceptor = function($q, $rootScope, Auth) { 
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A 
}; 
// 将 拦截 器 和 $http 的 request/response 链 整合 在 一 起 
$httpProvider 
.interceptors.push(interceptor ) ; 


}); 
OO 查看 15.5 节 获取 更 多 关于 $http 拦 截 器 的 内 容 。 


2. 使 用 路 由 定义 受 保护 资源 

如 果 我 们 希望 始终 对 某 些 路 径 进行 保护 ,或 者 请 求 的 API 不 会 对 路 由 进行 保护 ， 那 就 需要 监 
视 路 由 的 变化 ， 以 确保 访问 受 保护 路 由 的 用 户 是 处 于 登录 状态 的 。 

为 了 监视 路 由 变化 ， 需 要 为 $routeChangeStart 事 件 设置 一 个 事件 监听 器 。 这 个 事件 会 在 路 
由 属性 开始 resolve 时 触发， 但 此 时 路 由 还 没有 真 的 发 生变 化 。 
































通过 同 拦截 器 协同 工作 , 这 种 方式 会 更 加 有 效 。 如 果 不 通过 拦截 器 检查 状态 码 ， 
用 户 依然 有 可 能 发 送 未 经 授权 的 请 求 。 














通过 监听 器 对 事件 进行 监听 ， 并 检查 路 由 ， 看 它 是 否定 义 为 可 被 当前 用 户 访问 。 


| 应 用 的 访问 规则 。 可 以 通过 在 应 用 中 设置 常量 , 然后 在 每 个 路 由 中 通过 对 比 这 些 
来 判断 用 户 是 否 具 有 访问 权限 。 














angular.module('myApp'，['ngRoute ']) 
.Constant('ACCESS_LEVELS', { 

pub: 1， 

user: 2 
Dy 














通过 把 ACCESS_LEVELS 设 置 为 常量 ， 可 以 将 它 注入 到 .confgi() 和 .run() 代 码 块 中 ， 并 在 整 
个 应 用 范围 内 使 用 。 


下 面 ， 使 用 这 些 常 量 来 为 每 个 路 由 都 定义 访问 级 别 : 








angular.module('myApp'，['ngRoute ']) 
.config(function($routeProvider, ACCESS_LEVELS) { 
$routeProvider 
.when('/', { 


controller: 'MainController', 

templateUrl1l: 'views/main.html', 

access_level: ACCESS_LEVELS.pub 
}) 
.when('/account', { 

controller: 'AccountController', 

templateUrl: 'views/account.html', 

access_level: ACCESS_LEVELS.user 





}) 
.otherwise({ 
redirectTo: '/"' 
}); 
})3 
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上 面 每 一 个 路 由 都 定义 了 自身 的 access_level ， 可 以 根据 这 一 点 判断 当前 用 户 的 授权 状态 ， 
以 及 用 户 的 级 别 是 否 有 权限 访问 当前 路 由 。 


此 时 ， 用 户 可 能 处 于 以 下 两 种 状态 : 


口 未 经 过 身份 验证 的 匿名 用 户 ; 
口 通过 身份 验证 的 已 知 用 户 。 

为 了 验证 用 户 的 身份 , 需要 创建 一 个 服务 来 对 已 经 存在 的 用 户 进行 监视 。 同 时 需要 让 服务 能 
人 够 访问 浏览 器 的 cookie， 这 样 当 用 户 重新 登录 时 ， 只 要 会 话 有 效 就 无 需 再 次 进行 身份 验证 。 

这 个 小 服务 包含 了 一 些 操 作用 户 对 象 的 辅助 函数 : 

















angular .module( 'myApp.services', []) 
.factory('Auth', function($cookieStore,ACCESS_LEVELS) { 
var _user = $cookieStore.get('user'); 


var setUser = function(user) { 
if (luser.role || user.role < 0) { 
user .role = ACCESS_LEVELS .pub 


} 
_user = user; 
$cookieStore.put('user', _user); 
二 
return { 


isAuthorized: function(1v1) { 
return _user.role >= lv]1; 

和 
setUser: setUser, 
isLoggedIn: function() { 

return _user ? true : false; 
getUser: function() { 
return _user; 


getId: function() { 
return _user ? _user._id : null; 


getToken: function() { 
return _user ? _user.token : ''; 





ogout: function() { 
$cookieStore.removel 'user ' ); 
_user = null; } 





}; 
}); 
现在 ， 当 用 户 已 经 通过 身份 验证 并 登录 后 ， 可 以 在 $routeChangeStart 事 件 中 对 其 有 效 性 进 
行 检查 。 
angular .module( 'myApp', []) 
.run(function($rootScope, $location, Auth) { 


// 给 $routeChangeStart 设 置 监 听 
$rootScope.$on('$routeChangeStart', function(evt, next, curr) { 

















if (!Auth.isAuthorized(next.$$route.access_level)) { 
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if (Auth.isLoggedIn()) { 
// 用 户 登 录 了 ， 但 没有 访问 当前 视图 的 权限 
$location.path('/'); 
} else { 
$location.path('/login'); 
} 
} 
}); 
直入 
3. 发 送 经 过 身份 验证 的 请 求 
当 我 们 通过 了 身份 验证 , 并 取 回 了 用 户 的 授权 令 牌 后 ,就 可 以 在 向 服务 器 发 送 请 求 时 使 用 令 





牌 。 同 前 面 内 容 介 绍 的 一 样 ,我 们 希望 服务 絮 可 以 根据 这 个 唯一 的 令 牌 对 用 户 进 和 
器 的 角度 看 ， 当 收 到 一 个 带 有 令 牌 的 请 求 时 ， 验 证 令 牌 的 有 效 性 是 服务 器 的 责任 之 一 。 


合法 用 户 是 关联 的 状态 














如 果 提 供 的 令 牌 是 合法 的 , 且 与 一 个 

是 合法 且 安 全 的 。 
通过 令 牌 进行 

连接 可 以 提高 安全 性 。 

如 果 用 户 已 经 通过 了 身份 验证 , 可 以 在 发 送 请 
令 牌 附加 到 所 有 的 请 求 中 。 

手动 使 用 身份 令 牌 手动 创建 一 个 可 以 发 送 令 
到 请 求 中 即 可 。 人 例如， 如果 我 们 想 对 服务 器 发 出 一 
Backend 服 务 请 求 用 户 分 析 数 据 : 
[]) 


























angular .module( 'myApp', 
.Service('Backend ' ， 
this .getDashboardData = function() { 


牌 的 请 求 ， 只 要 将 token 当 作 参数 或 评 


function($http, $q, $rootScope, 


了 验证 。 从 服务 





， 那 服务 吉 就 会 认为 用 户 的 吴 份 


身份 验证 的 安全 性 取决 于 通信 所 采用 的 通道 ， 因 此 尽 可 能 地 使 用 SSL 














求 时 单独 给 每 个 请 求 都 加 入 验证 信息 , 或 者 把 





二 


青 求 头 添 加 
个 请 求 ， 此 时 我 们 正在 这 个 服务 器 上 通过 














Auth) { 


$http( { 
method: 'GET', 
url: 'http://myserver.com/api/dashboard' 


}).success(function(data) { 
return data.data; 
}).catch(function(reason) { 
$q.reject(reason); 
}); 
}; 
}); 


简单 地 将 token 当 作 参 数 (或 请 求 头 ) 发 送 就 可 以 进 


angular.module('myApp'，[) 
.Service('Backend' ，function($http，$q，$root 
this .getDashboardData = function() { 
$http({ 
method: 'GET', 
url: 'http://myserver.com/api/das 
params: { 
token: Auth.getToken() 
}).success(function(data) { 
return data.data; 
}).catch(function(reason) { 
$q.reject(reason); 
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井 行 令 牌 验证 : 


Scope，Auth) { 


hboard ' ， 
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}); 
}; 
}); 


当 向 后 端 发 送 请 求 时 ， 请 求 会 被 添加 token 参 数 。 

自动 添加 身份 令 牌 更 进一步 ， 如 果 想 要 为 每 个 请 求 都 添加 上 当前 用 户 的 令 牌 ， 可 以 创建 一 
个 请 求 拦截 器 ， 并 将 令 牌 当 作 参数 添加 进 请求 中 。 

创建 请 求 拦截 器 的 方法 和 前 面 创建 响应 拦截 器 的 方法 类 似 , 只 要 将 拦截 目标 从 response 换 成 
request 即 可 。 


angular .module( 'myApp', [|]) 
.config( function($httpProvider) { 
// 在 这 里 构造 拦截 器 
var interceptor = function($q, $rootScope, Auth) { 
return { 
'request': function(req) { 
return req; 


} 


'requestError': function(reqErr) { 
return reqErr; 


} 
7 
] ) ; 
在 请 求 拦 截 器 内 部 可 以 加 入 向 请 求 中 添加 token 参 数 的 业务 逻辑 ， 通 过 用 户 是 否 持 有 令 牌 来 
仿 查 身份 验证 情况 ， 同 时 需要 确保 不 会 将 手动 添加 的 同名 参数 覆盖 。 





function($q, $rootScope, Auth) { 
return { 

'request': function(req) { 
req.params = req.params || {}; 
if (Session.isAuthenticated() && !req.params.token) { 

req.params.token = Auth.getToken(); 

} 
return req; 

和 

pe 


16.8 ”和 MongoDB 通信 
即使 没有 后 端 服务 ， 我 们 依然 可 以 直接 同 提供 了 RESTful 接 口 的 数据 库 进 行 通信 。 
可 以 直接 同 Mongo 进 行 通信 ， 而 无 需 创建 后 端 服 务 。 





在 这 个 例子 中 ,我们 使 用 MongoLab"， 这 是 一 个 SAAS 服 务 ， 提 供 了 可 管理 的 
MongoDB 实 例 。 





为 了 同 MongoDB 通 信 ， 首 先 需 要 针对 Restangular 对 象 进行 一 些 自 定义 配置 。 





(Wh https://mongolab.com/ 
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下 面 的 配置 会 改变 全 局 的 Restangular 对 象 。 如 果 我 们 想 将 设置 封装 起 来 ， 针 对 单 
个 数据 库 进行 配置 , 就 需要 创建 一 个 服务 , 将 自 定义 的 Restangular 对 象 封 装 起 来 。 





首先 设置 API 密 钥 ， 鉴 于 这 个 密 钥 在 整个 应 用 中 都 是 不 变 的 ， 可 以 将 它 设置 成 常量 。 


angular .module( 'myApp', ['restangular']) 
.constant('apiKey', 'YOUR_API_KEY'); 


现在 这 个 API 密 钥 可 以 被 注入 到 应 用 的 任何 部 分 当中 。 接 下 来 在 模块 的 config( ) 代 码 块 中 进 
行 设置 。 
为 了 使 用 MongoLab ， 需 要 将 baseUr1 设 置 成 API 的 切入 点 : 


OA 
.config(function(RestangularProvider,apiKey) { 
RestangularProvider 
.setBaseUrl( 'https://api.mongolab.com/api/1/databases/YOURDB/collections'); 





ys 


接 下 来 ， 任 何 发 送 给 后 端 数据 库 的 请 求 都 需要 设置 API 密 钥 。 通 过 Restangular 的 setDefault 
RequestParams( ) 方 法 可 以 方便 地 进行 设置 : 


ph 
.config(function(RestangularProvider,apiKey) { 
VE 
RestangularProvider 
.SetDefaultRequestParams({ 
apikey: apikey 
}); 
所 


接 下 来 需要 更 新 Restangular 中 的 字段 映射 ， 将 MongoDB 的 _id.$oid 字 段 映 射 到 Restangular 
的 id 字段 上 。 通 过 setRestangularFields() 国 数 可 以 方便 地 实现 这 个 需求 : 











AR 
.config(function(RestangularProvider ,apiKey) { 
pe 
RestangularProvider.setRestangularFields({ 
id: '_id.$oid' 
上 


最 后 需要 窗 盖 _id 字 7 段 ， 这 个 字段 是 MongoDB 在 更 新 记录 时 设置 的 。Mongo 不 允许 履 盖 
字段 ， 所 以 我 们 通过 Restangular 来 模拟 这 个 过 程 。 鉴 于 Restangular 会 调用 路 由 来 更 新 元 素 ， | 
不 需要 担心 对 象 无 法 被 覆盖 。 


.config(function(RestangularProvider ,apiKey) { 
yl 
RestangularProvider .setRequestInterceptor(function(elem, operation, what) { 
if (operation === 'put') { 
elem._id = undefined; 
return elem; 














} 


return elem; 
}); 
})3 
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为 了 保证 完整 性 ， 下 面 是 完整 的 配置 代码 : 
angular.module( 'myApp', ['restangular']) 
.constant('apiKey', 'API_KEY') 


.config( function(RestangularProvider, apiKey) { 
RestangularProvider .setBaseUrl( 'https://api.mongolab.com/api/1/databases/YOURDB/collections'); 


RestangularProvider .setDefaultRequestParams({ 
apikey: apikey 

] 

RestangularProvider .setRestangularFields({ 
id: '_id.$oid' 

}); 

RestangularProvider.setRequestInterceptor(function(elem, operation, what) { 


if (operation === 'put') { 
elem._id = undefined; 
return elem; 

} 

return elem; 


}3s 
和 





Le 
光 
a 
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第 17 章 
promise 











Angular 事 件 系统 (我 们 会 在 第 24 章 讨论 它 ) 给 Angular 应 用 提供 了 很 多 强大 功能 。 它 给 我 们 
的 最 强大 功能 之 一 是 promise 的 自动 执行 。 


17.1 什么 是 promise 
































promise 是 一 种 用 异步 方式 处 理 值 (或 者 非 值 ) 的 方法 。promise 是 对 象 ， 代 表 了 一 个 函数 最 
终 可 能 的 返回 值 或 者 抛 出 的 异常 。 在 与 远程 对 象 打交道 时 ，promise 会 非常 有 用 ， 可 以 把 它们 看 
作 远 程 对 象 的 一 个 代理 。 


习惯 上 ，JavaScript 使 用 闭 包 或 者 回调 来 响应 非 同步 的 有 意义 的 数据 ， 比 如 页 面 加 载 之 后 的 
XHR 请 求 。 我 们 可 以 跟 数据 进行 交互 ， 就 好 像 它 已 经 返回 了 一 样 ， 而 不 需要 依赖 于 回调 函数 的 
触发 。 


回调 已 经 被 使 用 了 很 长 时 间 , 但 开发 人 员 用 它 时 都 会 很 痛苦 。 Wa 一 致 ， 得 不 到 
保证 , 当 依 赖 于 其 他 回调 时 , 它们 自 改 代码 的 流程 , 通常 会 让 调试 变 得 非常 难 。 每 一 步调 用 之 后 ， 
都 需要 显 式 处 理 错误 。 


在 执行 异步 方法 时 触发 一 个 函数 ， 然 后 期 待 一 个 回调 能 运行 起 来 。 与 之 不 同 的 是 ，promise 
提供 了 另外 一 种 抽象 : 这 些 男 数 返 回 promise 对 象 。 


例如 , 在 传统 的 回调 代码 中 , 我 们 可 能 会 有 一 个 方法 , 用 户 使 用 该 方法 向 他 的 朋友 发 送 数据 。 


// 示例 回调 代码 
User .get(fromId，{ 
success: function(err, user) { 
if (err) return {error: err}; 
user .friends.find(told, function(err, friend) { 
if (err) return {error: err}; 
user .sendMessage(friend, message, callback); 











}); 
}, 
failure: function(err) { 
return {error: err} 
} 
上 


这 个 回调 金字 塔 已 经 失控 了 ， 而且 我 们 还 没有 加 入 健壮 的 错误 处 理 代 码 。 此 外 , 在 被 调用 的 
回调 内 部 ， 也 需要 知道 参数 的 顺序 。 


刚才 基于 promise 版 本 的 代码 看 上 去 更 接近 于 : 
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User .get(fromId) 
.then(function(user) { 
return user.friends.find(toId) ; 
}, function(err) { 
// 没 找到 用 户 
] ) 
.then(function(friend) { 
return user.sendMessage(friend，message ) ; 
}, function(err) { 
// 用 户 的 朋友 返回 了 异常 
] ) 
.then(function(success) { 
// user was sent the message 
}, function(err) { 
// 发 生 错 误 了 
})3 


代码 不 仅仅 是 可 读 性 变 高 了 , 也 更 容易 理解 了 。 我 们 可 以 保证 回调 是 一 个 值 ， 而 不 用 处 理 回 
调 接口 。 

注意 , 在 第 一 个 例子 中 , 我 们 需要 用 跟 处 理 正常 状况 不 同 的 方式 去 处 理 异常 。 需 要 确定 什么 
时 候 使 用 回调 来 处 理 错 误 ,在 一 个 传统 的 API 响 应 函数 签名 ( 惯例 的 方法 签名 通常 是 (err, data) ) 
中 检查 错误 是 否 已 定义 。 我 们 所 有 的 AP 方法 都 需要 实现 同样 的 结构 。 

在 第 二 个 例子 里 , 我 们 用 同样 的 方式 处 理 成 功 和 错误 。 合成 对 象 将 会 以 常见 的 方式 接收 到 错 
误 。promise API 就 是 用 于 明确 地 执行 或 者 拒绝 promise 的 ， 所 以 不 必 担 心 我 们 的 方法 实现 了 不 同 
的 方法 签名 。 























17.2 为 什么 使 用 promise 
使 用 promise 的 附带 收获 之 一 是 逃脱 了 回调 地 狱 。promise 让 异步 函数 看 上 去 像 同步 的 。 基 于 
同步 函数 ， 我 们 可 以 按照 预期 来 捕获 返回 值 和 异常 值 。 


可 以 在 程序 中 的 任何 时 刻 捕 提 错 误 , 并 且 绕 过 依赖 于 程序 异常 的 后 续 代 码 。 我 们 不 需要 思考 
这 个 同步 代码 带 来 的 好 处 ， 就 已 经 达到 上 述 目 的 了 一 一 它 就 在 代码 的 本 质 中 。 


因此 ， 使 用 promise 的 目的 是 : 获得 功能 组 合 和 错误 冒 泡 (errorbubbling ) 能 力 的 同时 ， 保 持 
代码 异步 运行 的 能 力 。 

promise 是 头等 对 象 ， 自 带 了 一 些 约定 。 

口 只 有 一 个 resolve 或 者 reject 会 被 调用 到 : 


@ resolve 被 调用 时 ， 带 有 一 个 履行 值 ; 
@ reject 被 调用 时 要 带 一 个 拒绝 原因 。 


口 如 果 promise 被 执行 或 者 拒绝 了 ， 依 赖 于 它们 的 处 理 程序 仍然 会 被 调用 ; 
口 处 理 程序 总 是 会 被 异步 调用 。 


此 外 ， 可 以 把 promise 串 起 来 ， 并 且 人 允许 代码 以 通常 运行 的 方式 来 处 理 。 从 一 个 promise 冒 出 


的 异常 会 贯穿 整个 promise 链 。 












































promise 总 是 异步 执行 的 ， 可 以 放心 使 用 ， 无 需 担心 它们 会 阻塞 应 用 的 其 他 部 分 。 
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17.3 Angular 中 的 promise 
Angular 的 事件 循环 给 予 了 Angular 特 有 的 能 力 ， 能 在 $rootScope .$evalAsync 阶 段 中 执行 
promise ( 关于 运行 循环 的 更 多 细节 ， 参 见 第 24 章 )。promise 会 坐等 $qigest 运 行 循环 结 


这 件 事 让 我 们 能 毫 无 压力 地 把 promise 的 结果 转换 到 视图 上 。 它 也 能 证 我 们 不 加 思考 地 把 
XHR 调 用 的 结果 直接 赋值 到 $scope 对 象 的 属性 上 。 


我 们 来 建 一 个 例子 ， 从 GitHub 上 返回 一 组 针对 AngularJS 的 开放 pul1 请 求 。 
来 玩 玩 吧 ”。 



































<h1i>Open Pull Requests for Angular JS</h1> 


<Ul ng-controller="DashboardController"> 
<1i ng-repeat="pr in pullRequests"> 
{{ pr.title }} 
/Liy 
</ul> 


如 果 有 个 服务 返回 了 一 个 promise (第 19 章 会 深入 探讨 )， 可 以 在 .then() 方 法 中 与 这 个 
promise 交 互 ， 它 人 允许 我 们 修改 作用 域 上 的 任意 变量 ， 放 置 到 视图 上 ， 并 且 期 望 Angular 会 为 我 
们 执行 它 : 








angular .module( 'myApp', []) 
.controller('DashboardController', [ 
'$scope', 'GithubService', 
function($scope, UserService) { 
// GithubService 的 getPullRequests() 方 法 
// 返回 了 一 个 promise 
User .getPullRequests(123) 
.then(function(data) { 
$scope.pullRequests = data.data; 


}); 
}]》; 


当 对 getPullRequests 的 异步 调用 返回 时 ,在 .then() 方 法 中 就 可 以 用 $scope.pull 
Requests 这 个 值 了 ,然后 它 会 更 新 $scope .pullRequests 数 组 。 





如 何 创建 一 个 promise 





想 要 在 Angular 中 创建 promise， 可 以 使 用 内 置 的 $q 服 务 。$q 服 务 在 它 的 deferred API 中 提供 了 
一 些 方法 。 
首先 ， 需要 把 $q 服 务 注入 到 想 要 使 用 它 的 对 象 中 。 
angular .module( 'myApp', []) 
.factory('GithubService', ['$q', function($q) { 
// 现在 就 可 以 访问 到 $q 库 了 
}]); 


要 创建 一 个 deferred 对 象 ， 可 以 调用 defer( ) 方 法 : 








GD http://jsbin.com/UfotanA/4/edit 





图 灵 社 区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 


17.3 ”Angular 中 的 promise 171 





var deferred = $q.defer(); 


deferred 对 象 暴露 了 三 个 方法 ， 以 及 一 个 可 以 用 于 处 理 promise 的 promise 属 性 。 


nl 








可 


口 resolve (value ) 

resolve 国 数 用 这 个 值 来 执行 deferred promise。 

deferred.resolve( {name: "Ari", username: "@auser"}); 

D reject (reason ) 

这 个 方法 用 一 个 原因 来 拒绝 deferred promise。 它 等 同 于 使 用 一 个 “拒绝 ”来 执行 一 个 promise。 
deferred.reject("Can't update user"); 

// 等 同 于 

deferred.resolve($q.reject("Can't update user")); 

D notify (value ) 

这 个 方法 用 promise 的 执行 状态 来 进行 响应 。 

例如 ， 如 果 我 们 要 从 promise 返 回 一 个 状态 ， 可 以 使 用 notify( ) 函数 来 传送 它 。 

假设 我 们 想 要 从 一 个 promise 创 建 多 个 长 时 间 运 行 的 请 求 。 可 以 调用 notify 函 数 发 回 一 个 过 





.factory('GithubService', function($q, $http) { 
// 从 仓库 获取 事件 
var getEventsFromRepo = function() { 
// 任务 
} 
var service = { 
makeMultipleRequests: function(repos) { 
var d = $q.defer(), 
percentComplete = 0， 
output = []; 
for (var i = 0; i < repos.length; i++) { 
output .push(getEventsFromRepo(repos [ij])); 
percentComplete = (i+1)/repos.length * 100 
d.notify(percentComplete); 
} 


d.resolve(output); 


return d.promise; 
} 
. 


return service; 


}); 
有 了 GithubService 对 象 上 的 这 个 makeMultipleRequests( ) 子 数 ,每 次 获取 和 人 处理 一 个 仓库 
时 ， 都 会 收 到 一 个 过 程 通知 。 
可 以 在 我 们 对 promise 的 使 用 中 用 到 这 个 通知 ， 在 用 promise 时 加 上 第 三 个 函数 调用 。 例 如 : 



































.controller('HomeController', 
function($scope, GithubService) { 
GithubService.makeMultipleRequests( |[ 
'auser/beehive', 'angular/angular.js' 
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中 


] ) 


.then(function(result) { 
// 处 理 结果 

}, function(err) { 
// 发 生 错误 了 

}, function(percentComplete) { 
$scope.progress = percentComplete; 


的 





可 以 在 deferred 对 象 上 以 属性 的 方式 访问 promise: 


deferred.promise 








上 面 这 个 例子 完整 地 展示 了 如 何 创建 一 个 函数 用 于 响应 promise， 看 上 去 可 能 类 似 于 下 面 这 
些 GithubService 上 的 方法 。 


angular .module( 'myApp', []) 
.factory('GithubService', [ 


}1); 


'$q', 


'$http', 


function($q, $http) { 
var getPullRequests = function() { 


} 


var deferred = $q.defer(); 
// 从 Github 获 取 打 开 的 angularjs pull 请 求 列 表 
$http.get('https://api.github.com/repos/angular/angular.js/pulls') 
.Success(function(data) { 

deferred.resolve(data) ; 
}) 
.error(function(reason) { 

deferred.reject(reason); 


}) 


return deferred.promise; 


return { // 返回 工厂 对 象 


把 


getPul1Requests: getPullRequests 


现在 我 们 就 可 以 用 promise API 来 跟 getPul1Requests( ) promise 交 互 。 


查看 完整 示例 : http://jsbin.com/rukefimu/3/edit。 
在 上 面 这 个 service 的 实例 中 ， 可 以 用 两 种 不 同方 式 跟 promise 交 互 。 


OD then(successFn, errFn, notifyFn) 


无 论 promise 成 功 还 是 失败 了 ， 当 结果 可 用 之 后 ，then 都 会 立刻 异步 调用 successFn 或 者 


errFn。 这 个 方法 始终 用 一 个 参数 来 调用 回调 函数 : 结果 ,或 者 是 拒绝 的 理由 。 


























在 promise 被 执行 或 者 拒绝 之 前 ,notifyFn 回 调 可 能 会 被 调用 0 到 多 次 ， 以 提供 过 程 状态 的 


提示 。 


then( ) 方 法 总 是 返回 一 个 新 的 promise， 可 以 通过 successFn 或 者 errFn 这 样 的 返回 值 执行 或 
者 被 拒绝 。 它 也 能 通过 notifyFn 提 供 通知 。 

口 catch(errFn) 

这 个 方法 就 只 是 个 帮助 函数 ， 能 让 我 们 用 .catch( function(reason){}) 取 代 err 回 调 : 
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$http.get('/repos/angular/angular.js/pulls') 
.catch(function(reason) { 
deferred.reject(reason); 


}); 


口 finally(callback) 





finally 方 法 允许 我 们 观察 promise 的 履行 或 者 拒绝 ， 而 无 需 修 改 结果 的 值 。 当 我 们 需要 释放 
一 个 资源 ， 或 者 是 运行 一 些 清理 工作 ， 不 管 promise 是 成 功 还 是 失败 时 ， 这 个 方法 会 很 有 用 。 














我 们 不 能 直接 调用 这 个 方法 ， 因 为 finally 是 正中 JavaScript 的 一 个 保留 字 。 纠 结 到 最 后 ， 只 
好 这 样 调用 它 了 : 


promise['finally'](function() {}); 








Angular 的 $q deferred 对 象 是 可 以 串 成 链 的 ， 这 样 即使 是 then， 返回 的 也 是 一 个 promise。 这 
个 promise 一 被 执行 ,then 返 回 的 promise 就 已 经 是 resolved 或 者 rejected 的 了 。 





| 这 些 promise 也 就 是 Angular 能 支持 $http 拦 截 器 的 原因 。 


$q 服 务 类 似 于 原始 的 Kris Kowal 的 Q 库 : 
(1) $q 是 跟 Angular 的 $rootScope 模 型 集成 的 ， 所 以 在 Angular 中 ， 执 行 和 拒绝 都 很 快 。 


(2) $q promise 是 跟 Angular 模 板 引 擎 集成 的 ， 这 意味 着 在 视图 中 找到 的 任何 promise 都 会 在 视 
图 中 被 执行 或 者 拒绝 。 


(3) $q 很 小 ， 所 以 没有 包含 Q 库 的 完整 功能 。 








17.4” 链 式 请 求 


then 方 法 在 初始 promise 被 执行 之 后 ， 返 回 一 个 新 的 派生 promise。 这 种 返回 形式 给 了 我 们 一 
种 特有 的 能 力 ， 把 另 一 个 then 接 在 初始 的 then 方 法 结果 之 后 。 





// 一 个 响应 promise 的 服务 
GithubService.then(function(data) { 
var events = []; 
for (var i = 0; i «< data.length; i++) { 
events.push(datal[i] .events); 
} 


return events; 
}).then(function(events) { 
$scope.events = events; 


}); 
在 本 例 中 , 我 们 可 以 创建 一 个 执行 链 , 它 允许 我 们 中 断 基 于 更 多 功能 的 应 用 流程 ， 可 以 籍 此 


导向 不 同 的 结果 。 这 个 中 断 能 让 我 们 在 执行 链 的 任意 时 刻 暂 停 或 者 推迟 promise 的 执行 。 











OO 这 个 中 断 也 是 $http 服 务实 现 请 求 和 响应 拦截 器 的 方式 。 








$q 库 自 带 了 几 个 不 同 的 有 用 方法 。 
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17.4.1 all(promises) 

如 果 我 们 有 多 个 promise， 想 要 把 它们 合并 成 一 个 ， 可 以 使 用 $q.al1(promises ) 方 法 来 把 它 
们 合并 成 一 个 promise。 这 个 方法 带 有 一 个 参数 。 

口 promises ( 数组 或 者 promise 对 象 ) 

一 个 promise 数 组 或 者 promise 的 hash。 


all() 方 法 返回 单个 promise, 会 执行 一 个 数组 或 者 一 个 散 列 的 值 。 每 个 值 会 响应 promise 散 列 
中 的 相同 序号 或 者 键 。 如 果 任 意 一 个 promise 被 拒绝 了 ， 结 果 的 promise 也 会 被 拒绝 。 


17.4.2 defer() 
defer() 方 法 创建 了 一 个 deferred 对 象 ， 它 没有 参数 ， 返 回 deferred 对 象 的 一 个 实例 。 


17.4.3 reject(reason) 

这 个 方法 创建 了 一 个 promise, 被 以 某 一 原因 拒绝 执行 了 , 它 专门 用 于 让 我 们 能 在 一 个 promise 
链 中 转发 拒绝 的 promise， 类 似 JavaScript 中 的 throw。 在 同样 意义 上 , 我 们 能 在 JavaScript 中 捕获 
个 异常 ， 也 能 够 转发 这 个 拒绝 ,我 们 需要 把 这 个 错误 重新 抛 出 。 可 以 通过 $q.reject(reason) 来 
做 到 这 点 。 

这 个 方法 带 有 单个 参数 : 

口 reason ( 常量 、 字 符 串 、 异 常 、 对 象 ) 

拒绝 的 原因 。 

reject() 方 法 返回 一 个 已 经 用 某 个 原因 拒绝 的 promise。 



































17.4.4 when(value) 
when( ) 函数 把 一 个 可 能 是 值 或 者 能 接着 then 的 promise 包 装 成 一 个 $q promise。 这 样 我 们 就 能 
处 理 一 个 可 能 是 也 可 能 不 是 promise 的 对 象 。 
when( ) 函数 有 一 个 参数 : 
DQ value 
该 参数 是 个 值 ， 或 者 是 promise 


when( ) 函数 返回 了 一 个 promise， 我 们 可 以 像 使 用 其 他 promise 一 样 使 用 它 。 
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服务 兹 通信 











Angular 最 强大 的 组 件 之 一 是 与 服务 端 通信 的 能 力 。 不 管用 什么 后 端 ，Angular 都 能 通过 API 
与 其 通信 。 
本 章 关 注 两 种 后 端 : 将 要 开发 的 自 定 义 后 端 ， 以 及 将 后 端 用 作 服 务 的 无 服务 器 后 端 。 





18.1 自 定 义 服务 器 端 


本 节 重 点 介绍 用 NodeJS 构 建 一 个 自 定义 的 服务 端 应 用 程序 。 尽 管 我 们 关注 的 是 用 Node 构 建 
这 个 服务 端 应 用 ， 也 可 以 用 其 他 任意 支持 HTTP API 路 由 的 服务 端 语言 来 创建 后 端 。 





如 果 你 是 Ruby on Rails 开 发 人 员 了 可 以 参考 我 们 写 的 那 本 专 门 介绍 如 何 使 用 
Rails 的 书 : Riding Rails with AngularJS" 。 


要 启动 用 Node 做 后 端的 应 用 ， 需 要 先 安装 NodeJS。 





18.2 ”安装 NodeJS 


NodeJS 是 一 个 服务 器 端 平台 ， 建 立 在 Chrome JavaScript 运 行 时 上 。 它 是 一 个 事件 驱动 的 非 阻 








塞 、 轻 量 级 JavaScript 运 行 时 ， 能 让 我 们 在 服务 端 编写 JavaScript。 
要 安装 NodeJS， 我 们 可 以 打开 nodejs.org”， 点 击 大 按钮 Install。 它 会 检测 并 且 下 载 适合 我 们 
平台 的 安装 程序 。 


如 果 因 为 茶 些 原因 下 载 了 错误 的 所， 也 没什么 问题 。 我 们 可 以 点 击 Downloads 
按钮 ， 然 后 手动 选择 合适 的 包 。 








现在 可 以 运行 安装 程序 了 ， 让 它 自然 运行 。 安 装 完 成 后 ， 就 能 在 命令 行 运 行 两 个 包 了 : 

口 node 

口 npm 

node 是 Node 的 二 进 制 文件 ， 我 们 用 它 来 运行 Node 应 用 ; 而 npm 是 Node 包 管理 器 ， 我 们 用 它 














GD http:/www.fullstack.io/edu/angularrails 
©® http://nodejs.org 
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来 安装 Node 库 。 


18.3 安装 Express 

我 们 要 用 一 种 叫做 expressjs 的 Web 应 用 程序 框架 , 它 会 给 我 们 一 些 处 理 HTTP 的 语法 糖 。 它 允 
许 我 们 只 使 用 Web 应 用 程序 的 功能 ， 而 不 需要 处 理 Node 的 HTTP 服务 器 的 细节 。 

它 的 特性 很 多 , 包括 提供 了 一 个 干净 的 路 由 语法 、 动 态 的 中 间 件 和 大 量 专门 为 Express 创 建 的 
开源 包 。 此 外 ， 许 多 知名 企业 在 生产 中 也 使 用 它 。 

为 了 安装 Express， 我 们 会 使 用 npm 二 进 制 : 











天 





$ npm install -g express-generator 


我 们 使 用 -g 标 记 来 将 包 进行 全 局 安装 。 如 果 不 想 全 局 安装 它 ， 可 以 省 略 它 ， 这 


样 它 会 被 安装 在 当前 目录 的 node modules/ 目 录 下 。 然 而 我 们 还 是 推荐 对 它 进 行 
全 局 安装 。 
现在 ， 可 以 用 Express 生 成 器 来 生成 Express 应 用 。 
$ express myApp 
这 行 代码 生成 了 一 个 很 基本 的 Express 应 用 , 它 带 有 一 套 依赖 项 , 以 及 一 个 非 强制 性 的 目录 结 
构 ， 如 图 18-1 所 示 。 


@NNA tmp — zsh 一 Solarized Dark xterm-256color 一 80x24 











图 18-1 运行 Express 生 成 器 








要 运行 我 们 的 应 用 ， 需 要 用 npm 把 基本 的 依赖 项 安装 在 本 地 。 这 次 ， 我们 会 用 它 把 
package. json 中 设置 的 依赖 项 安装 到 本 地 。 





$ cd myApp && npm install -qd 


| -qd 标志 告诉 npm 把 依赖 项 安装 在 本 地 。 这 个 语法 十 分 明确 : 可 以 丢 开 这 个 -d， 
因为 它 被 设置 为 默认 将 依赖 项 安装 到 本 地 。 
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现在 ， 我 们 来 运行 一 下 这 个 应 用 ， 以 确认 一 切 都 能 按照 我 们 设想 的 那样 运行 。 只 需 用 node 
可 执行 文件 把 它 运 行 一 下 就 可 以 了 ， 如 图 18-2 所 示 。 

















$ node app.js 


BO Express Py 





Express 


Welcome to Express 








图 18-2 ”运行 Express 

如 果 我 们 在 Web 浏 览 器 中 打开 URL http://localhost:3000， 刚 生成 的 Express 应 用 的 默认 页 就 会 
显示 出 来 。 

每 次 我 们 对 app.js 文 件 作 修改 ， 都 需要 停止 服务 器 并 晶 重 启 。 在 开发 过 程 中 ， 这 个 过 程 太 麻 
烦 了 ， 所 以 我 们 建议 不 使 用 node.js， 而 是 使 用 nodemon 服 务 器 。 


要 安装 nodemon， 需 再 次 使 用 npm: 








$ npm install --save-dev _ nodemon 


| --save-dev 标 记 告 诉 npm 把 这 个 包 保 存在 package.json 中 的 qdevDependencies 段 
落 。 我 们 推荐 使 用 这 种 做 法 ， 因 为 当 团 队 有 多 个 开发 人 员 时 ， 这 会 有 所 帮助 : 
可 以 确保 整个 团队 对 代码 库 都 有 正确 的 依赖 项 。 


我 们 可 以 不 用 node app.jjs 启 动 应 用 ， 而 用 下 面 的 代码 替换 它 : 
$ nodemon app.js 
每 次 对 app.js 文 件 作 修改 并 且 保 存 时 ，nodemon 会 自动 重启 Node 应 用 。 


该 应 用 在 appjs 中 启动 。 在 appjs 文 件 中 ， 有 两 个 重要 的 组 件 值得 注意 : 提供 静态 文件 的 静态 
路 径 和 执行 的 路 由 以 及 如 何 执行 的 )。 


A i 

app.use(express.methodOverride( )); 

app.use(app.router); 

// 第 一 行 

app.use(express.static(path. join(__dirname, 'public'))); 
AR 

app.get('/', routes.index); 

app.get('/users', user.1ist); 


J a 
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一 行 代码 调用 了 express.static()， 告 诉 Node 到 public/ 目 录 中 查找 任何 匹配 请 求 路 由 的 


文件 。 例 如 ， 如 果 请 求 的 路 由 是 musers， 它 就 会 查找 一 个 叫 “users” 的 文件 。 








第 二 组 代码 (app.getO ) 匹配 在 public/ 目 录 中 不 存在 静态 文件 的 路 由 。 
要 使 用 Angular 应 用 ， 需 要 在 生成 的 app.js 上 作 两 次 修改 : 
首先 ， 我 们 交换 express.static() 和 app.router 行 ， 如 下 所 示 : 





A a 

app.use(express.methodOverride( )); 

// 把 该 行 移 至 下 一 行 上 方 

app.use(express.static(path. join(__dirname, 'public'))); 
app.use(app.router); 


a 
尽管 严格 来 说 这 个 交换 不 是 很 有 必要 ,但 它 有 助 于 后 续 对 HTML5Mode 的 支持 ， 并 且 会 告诉 





Express 预 取 我 们 之 前 应 用 中 定义 的 public/ 目 录 下 的 文件 。 


其 次 ， 移 除 指向 “/” 路 由 的 一 行 : 


HA i 
// app.get('/'，routes.index); // 删除 这 一 行 
app.get('/users', users.list); 


fs es 
现在 可 以 像 平常 一 样 在 public 目 录 中 写 Angular 应 用 了 。 


18.4 调用 API 





本 地 的 Node 服 务 器 现在 就 把 应 用 运行 起 来 了 ， 所 以 可 以 调用 我 们 自己 的 API， 我 们 会 在 


Express 服 务 器 中 开发 这 些 API。 


例如 ， 我 们 开发 一 个 应 用 来 记录 用 户 点 击 特定 按钮 的 次 数 ， 需 要 写 两 个 路 由 : 

GET /hits 该 路 由 返回 我 们 点 击 按钮 的 总 次 数 。 

POST /hit 该 路 由 对 按钮 的 一 次 新 点 击 进行 记录 ， 并 且 给 我 们 返回 最 新 的 总 点 击 数 。 

首先 ， 我 们 来 构建 应 用 的 index.html 页 面 基 本 视图 。 我 们 会 把 它 放 在 Node 应 用 的 public/ 中 ， 











这 样 如 果 路 由 请 求 的 是 /或 者 /index.html，Express 都 会 用 这 个 文件 来 响应 请 求 : 


《14Goctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
<title>Node app¢/title> 
“link rel="stylesheet" href="stylesheets/style.css"> 
<Script src="bower_components/angular/angular.min.js"></script> 
“</head> 
<body> 
<div ng-controller="HomeController"> 
<h3>Button hits: {{ hits }}</h3> 
<button ng-click="registerHit()"> 
HIT ME, if you dare 
</button> 
«</div> 
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<script src="javascripts/services.js">¢/script> 
<script src="javascripts/app.js">¢/script> 
</body> 
</html> 


在 public/javacscripts/app.js 文 件 中 ， 我 们 在 myApp Angular 模 块 的 顶部 添加 一 个 控制 器 : 


angular.module('myApp'，[ 
"ngRoute ' ， 
"myApp .services’ 
] ) 
.Controller('HomeController', function($scope, HitService) { 
HitService.count() 
.then(function(data) { 
$scope.hits = data; 
} 3 


$scope.registerHit = function() { 
HitService.registerHit() 
.then(function(data) { 
$scope.hits = data; 


> 
下 
我 们 会 建立 一 个 Angular 服 务 来 响应 对 这 些 路 由 的 调用 ,就 像 在 上 面 的 控制 器 里 看 到 的 那样 : 


angular .module( 'myApp.services', []) 
.factory('HitService', function($q, $http) { 
var service = { 
count: function() { 
var d = $q.defer(); 
$http.get('/hits') 
.Success(function(data, status) { 
d.resolve(data.hits); 
}).error(function(data, status) { 
d.reject(data); 
3 
return d.promise; 
二 
registerHit: function() { 
var d = $q.defer(); 
$http.post('/hit', {}) 
.Success(function(data, status) { 
d.resolve(data.hits); 
}).error(function(data, status) { 
d.reject(data); 
}); 
return d.promise; 
} 
} 
return service; 


上 和 
有 关 服 务 的 更 多 信息 ， 敬 请 参阅 第 14 章 。 
这 个 服务 暴露 了 两 种 调用 前 文 定义 过 的 路 由 的 方法 : 


口 count 














DQ registerHit 
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在 Node 应 用 的 app.js 中 ， 需 要 注册 两 个 新 的 路 由 ， 并 且 创 建 定义 路 由 的 功能 。 
这 两 个 新 的 Node 路 由 与 我 们 在 上 面 调用 的 服务 路 由 相 匹 配 : 


HA 
var hits = require('./routes/hits'); 
yr 

app.get('/hits', hits.count); 
app.post('/hit', hits.registerNew); 
PPA 


任 一 剩 下 来 的 组 件 就 是 创建 真正 的 后 端 ， 记 录 点 击 数 的 服务 端 逻 辑 。 


在 NodeJS 中 ， 每 个 请 求 的 模块 通过 exports 方 法 来 暴露 方法 。 要 暴露 上 面 提 到 的 两 个 方法 
count 和 registerNew， 需 要 把 它们 附加 到 routes/hits.js 文 件 中 的 exports 对 象 上 。 


在 routes/hitsjs 文 件 中 , 我 们 在 内 存 中 创建 一 个 点 击 仓库 来 存储 点 击 数 , 这 样 ， 如 果 重 启 服 务 
器 的 话 ， 点 击 数 也 会 被 重 置 。 


/* 
* HIT service 
*/ 
var hits = ©; 
exports .count = function(req, res){ 
Tes.send(200，({ 
hits: hits 
}); 
} 
exports.registerNew = function(req, res) { 
hits += 1; 
res.send(260, { 
hits: hits 
}); 




















5 




















} 
现在 ， 如 果 启 动 我 们 的 Node 应 用 ， 把 路 由 指向 http://localhost:3000， 就 会 看 到 已 经 给 自己 的 
Angular 应 用 添加 了 预期 的 功能 ， 如 图 18-3 所 示 。 


全日 日 Node app je 








Button hits: 0 


HIT ME, ifyou dare 





图 18-3 ”首次 


下 


动 





按钮 被 点 击 之 后 如 图 18-4 所 示 。 
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四 日 日 Node app 六 





Button hits: 1 


HIT ME, if you dare 








图 18-4 ”点 击 按钮 之 后 


18.5 使 用 Amazon AWS 的 无 服务 器 应 用 

构建 一 个 单 页 应 用 (SPA ) 的 最 大 好 处 之 一 是 能 够 组 织 静态 文件 ， 而 不 需要 建立 并 运行 一 个 
后 端 基础 架构 的 服务 。 
然而 , 我 们 要 构建 的 多 数 应 用 , 需要 一 个 包含 自 定义 数据 的 后 端 服 务 器 的 支持 。 有 越 来 越 多 
的 选择 ， 能 让 开发 人 员 只 需 关 注 构建 前 端 代码 ， 而 暂时 不 管 后 端 。 

Amazon 最 近 发 布 了 一 个 选项 ， 能 让 我 们 在 浏览 器 中 创建 无 服务 需 的 Web 应 用 : Amazon AWS 
JavaScript SDK", 

Amazon 的 基于 浏览 器 的 (服务 端的 是 用 NodeJS ) SDK 能 让 我 们 安心 地 组 织 应 用 ， 并 且 与 工 
业 级 的 后 端 服务 进行 交互 。 

通过 使 用 S3 来 存放 应 用 和 文件 , 将 DynamoDB 用 作 NoSQL 存 储 ， 以 及 其 他 的 海量 服务 ， 将 应 
用 全 部 存放 于 Amazon 基 础 架构 中 现在 已 经 成 为 可 能 。 我 们 甚至 可 以 从 客户 端 安全 地 接受 支付 ， 
并 且 从 Amazon CDN 中 获得 所 有 收益 。 

基于 这 个 发 布 ，JavaScript SDK 现 在 能 让 我 们 跟 5 种 Amazon AWS 服 务 进行 交互 。 这 五 种 服 
务 是 : 














18.5.1 DynamoDB 


这 个 快速 且 完 全 受 控 的 NoSQL 数 据 库 服务 能 让 我 们 扩展 到 无 限 大 小 , 自 带 多 重复 制 和 安全 访 
问 控制 。 





18.5.2 ”简单 通知 服务 (SNS) 


这 个 服务 是 一 种 快速 灵活 、 完 全 受 控 的 推送 服务 , 能 让 我 们 把 消息 推送 到 移动 设备 和 其 他 服 
务 ， 比 如 email 或 者 甚至 是 Amazon 自 己 的 简单 队列 服务 (SQS )。 























OD http://aws.amazon.com/ 
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18.5.3 简单 队列 服务 (SQS，Simple Queue Service) 


这 个 快速 、 可 信赖 、 完 全 受 控 的 队列 服务 能 让 我 们 以 一 种 良好 管理 的 方式 创建 巨型 队列 。 我 
们 可 以 创建 大 型 请 求 对 象 ， 这 样 可 以 用 一 个 通用 队列 把 我 们 的 应 用 组 件 从 其 他 组 件 中 完全 解 耦 。 




















18.5.4 简单 存储 服务 〈S3) 

这 个 著名 的 、 完 全 受 控 的 海量 数据 存储 能 让 我 们 存储 无 限 数量 的 大 对 象 (上限 是 5T )， 对 象 
数量 不 限 。 我 们 可 以 使 用 S3 从 各 个 地 方 来 安全 地 存储 加 密 的 受 保护 数据 , 甚至 能 使 用 S3 来 托管 我 
们 的 Angular 应 用 。 





18.5.5 ”安全 令 牌 服务 〈STS) 


这 个 Web 服 务 允许 我 们 为 IAM 用 户 请 求 临 时 的 受 限 权限 认证 。 我 们 不 会 深入 探讨 STS，, 但 是 
它 确实 为 创建 数据 之 上 的 受 限 安全 操作 提供 了 一 个 不 错 的 接口 。 











18.6 AWSJS + Angular 


本 节 打 算 演 示 如 何 把 应 用 做 好 ， 让 它们 迅速 在 AWSJS 体 系 中 运行 起 来 。 

要 做 到 这 一 点 , 我 们 要 先 创 建 一 个 可 以 让 客户 上 传 屏 幕 截图 的 缩 略图 , 即 Gunroad "的 极 简 版 

我 们 可 以 通过 集成 美妙 的 Stripe2 API 来 让 他 们 出 售 自己 的 截屏 。 
对 这 两 个 服务 , 我们 已 经 推荐 得 够 多 了 ,这 个 迷你 演示 并 非 要 用 来 取代 他 们 的 服务 ， 

而 只 是 用 于 展示 Angular 和 AWS API 的 强大 。 

为 了 创建 我 们 的 产品 ， 需 要 做 到 以 下 几 点 : 

口 允许 用 户 登 录 我 们 的 服务 ， 存 储 他 们 唯一 的 email; 

口 允许 用 户 上 传 与 他 们 相关 的 文件 ; 

口 允许 用 户 点 击 图 像 ， 并 且 给 这 些 用 户 一 个 购买 这 个 图 像 的 选项 ; 

口 接受 信用 卡 的 费用 ， 并 且 直 接 从 单 页 Angular 应 用 接受 款项 。 








本 


0 



































18.7 开始 
我 们 从 一 个 标准 结构 的 index.html 开 始 : 


¢ldoctype html> 

<html> 
<head> 
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> 
</script> 
<script 
src="http://code.angularjs.org/1.2.13/angular-route.min.js"></script> 





GD https://gumroad.com/ 
© http://stripe.com 
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<link rel="stylesheet" href="styles/bootstrap.min.css"> 
</head> 
<body> 
<div ng-view> </div> 
<script src="scripts/app.js"></script> 
<script src="scripts/controllers.js">¢/script> 
<script src="scripts/services.js">»></script> 
<script src="scripts/directives.js"></script> 
</body> 
</html> 


在 这 个 标准 的 Angular 模 板 中 ， 并 未 加 载 任何 出 格 的 东西 。 我 们 加 载 了 基础 的 Angular 库 ， 以 
及 ngRoute 和 自 定 义 的 应 用 代码 。 


我 们 的 应 用 代码 也 是 标准 的 。scripts/appjs 文 件 简单 地 定义 了 一 个 带 有 单个 路 由 /的 Angular 模 块 : 














angular.module( 'myApp', [ 
"ngRoute ' ， 
"myApp .services ' ， 
"myApp.dqirectives ']) 
.config(function($routeProvider ) { 
$routeProvider 
.when('/', { 
controller: 'MainController '， 
templateUrl: 'templates/main.html' 
}) 
.otherwise({ 
redirectTo: '/' 
}); 
下 


Scripts/controllers.js 文 件 从 主 模块 创建 了 控制 器 : 


angular .module( 'myApp ') 
.controller('MainController', function($scope) { 


}); 
scripts/services.js 和 scripts/directives.js 文 件 也 很 简单 ， 如 图 18-5 所 示 。 


// scripts/services.js 
angular.module( 'myApp.services', []); 


// scripts/directives.js 
angular .module( 'myApp.directives', [|]) 


LEE ns 一 zwh — Solarized Dach aem_2stcopr — 114x30 





图 18-5”Angular 结 构 





图 灵 社 区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 








AWS 生 态 系统 很 庞大 ， 在 全 世界 各 地 被 广泛 应 用 于 生产 中 。Amazon 运 营 的 大 量 有 用 服务 ， 
使 它 成 为 了 一 个 梦幻 平台 ， 我 们 在 这 个 平台 上 建立 自己 的 应 用 。 


从 历史 上 看 ， 这 些 API 并 不 总 是 容易 使 用 和 理解 ， 所 以 我 们 希望 在 这 里 解决 其 中 一 些 困 惑 
传统 上 ， 我 们 会 使 用 一 个 经 过 认证 的 请 求 ， 应 用 则 使 用 client_igd 或 者 秘密 访问 的 key 模 型 。 


既然 我 们 是 在 浏览 器 中 操作 ， 把 client_id 和 client_secret 仍 入 每 个 人 都 能 看 到 的 浏览 器 中 是 
不 太 好 的 。( 如 果 它 是 用 明文 般 入 的 ， 就 没有 什么 秘密 可 言 了 ， 对 吧 ? ) 

幸好 ,AWS 团 队 已 经 提供 了 一 个 替代 方法 , 用 于 对 我 们 的 站 点 进行 身份 识别 和 认证 , 以 获取 
对 AWS 资 源 的 访问 权 。 

创建 基于 AWS 的 Angular 应 用 的 第 一 步 ， 是 建立 这 个 我 们 在 整个 过 程 中 都 会 用 到 的 相对 复杂 
的 认证 和 授权 。 

目前 〈 写作 本 书 时 )，AWS JS 库 与 三 个 身份 验证 提供 者 进行 了 简洁 整合 : 
口 Facebook 


D Google Plus 
口 Amazon Login 


本 节 将 关注 集成 Google+ API 来 实现 我 们 的 登录 ， 但 对 其 他 两 个 身份 验证 提供 者 来 说 ， 这 个 
过 程 是 非常 类 似 的 。 
















































































18.9 安装 


先 说 重要 的 , 我 们 需要 安装 index.html 中 的 文件 。 在 我 们 的 index.html 中 , 需要 包含 AWS-SDK 
库 和 Google API 库 。 


需要 修改 一 下 index.html， 使 它 包 含 这 些 库 : 


<ldoctype html> 
<html> 
<head> 
<script 
src="http://code.angularjs.org/1.2.13/angular .min.js"><¢/script> 
<script 
src="http://code.angularjs.org/1.2.13/angular-route.min.js"></script> 
<script 
src="https://sdk.amazonaws.com/js/aws-sdk-2.0.0-rc4.min.js"></script> 
<link rel="stylesheet" href="styles/bootstrap.min.css"> 
《</head> 
<body> 
<div ng-view> </div> 
<script src="scripts/app.js">¢/script> 
<script src="scripts/controllers.js">»</script> 
<script src="scripts/services.js"> </script> 
<Script src="scripts/directives.js"></script> 
<Script type="text/javascript" src="https://js.stripe.com/v2/">¢/script> 
<ScTript type="text/javascript"> 
(function() { 
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var po = document .createElement('script' ); 

po.type = 'text/javascript'; 

po.async = true; 

po.src = 'https://apis.google.com/\js/client:plusone.js?onload=onLoadCallback'; 
var s = document.getElementsByTagName('script')[0]; 

s.parentNode. insertBefore(po, s); 


}) C9; 
</script> 
</body> 
</html> 


现在 ， 注 意 我 们 给 Google JavaScript 库 添加 了 一 个 onl1oad 回 调 ， 并 日 没有 使 用 ng-app 来 启动 
我 们 的 应 用 。 如 果 让 Angular 自 动 启动 我 们 的 应 用 ， 我 们 会 进入 一 个 竞 态 条 件 。 在 这 种 条 件 下 ， 
Google API 可 能 在 应 用 启动 时 尚未 加 载 。 


应 用 的 这 种 不 确定 性 会 让 体验 变 得 无 法 使 用 , 所 以 , 我 们 要 在 onLoadCal lback 中 手动 启动 应 用 。 


为 了 手动 启动 应 用 ， 我 们 在 window 服 务 中 添加 了 onLoadCcallback 函数 。 在 我 们 能 启动 
Angular 之 前 ， 需 要 确认 Google 登 录 客 户 端 已 经 加 载 。 


Google API 客 户 端 ， 或 者 gapi ， 是 在 运行 时 间 被 包含 进来 的 ， 并且 是 被 默认 设置 的 ， 以 便 延 
述 加 载 服务 。 通 过 告诉 gapi .client 在 启动 应 用 之 前 提前 加 载 oauth2 库 ， 我 们 避免 了 任何 潜在 的 
oauth2 库 不 可 用 的 后 果 。 


// in scripts/app.js 
window.onLoadCallback = function() { 
// 当 文 档 对 象 准备 好 了 
angular .element(document).ready(function() { 
// 启动 oauth2 库 
gapi.client.1load('oauth2', 'v2', function() { 
// 最 后 ,启动 我 们 的 Angular 应 用 
angular .bootstrap(document, ['myApp']); 
局 : 









































] ) ; 
} 


必要 的 库 创 建 好 了 ,而且 我 们 的 应 用 也 做 好 了 启动 的 准备 ,这 时 我 们 可 以 建立 应 用 的 授权 部 分 。 





18.10 ”运行 


鉴于 我 们 是 在 使 用 一 个 服务 , 它 取 决 于 我 们 的 URL 是 一 个 预期 的 URL, 我 们 需要 运行 一 个 服 
务 器 ， 而 不 是 简单 地 在 浏览 器 中 加 载 HTML。 

我 们 推荐 使 用 非常 简单 的 Python SimpleHTTPServer 来 提供 文件 目录 。 这 个 python 服 务 器 是 写 
来 提供 当前 目录 的 , 这 个 目录 会 被 在 本 机 当 作 一 个 web 服 务 器 运行 。 我 们 可 以 使 用 SimpleHTTPServer 
来 息 类 是 在 web 服 务 器 上 运行 一 个 应 用 ， 并 且 把 它 加 载 到 web 浏 览 器 中 。 


$ cd PROJECT_DIRECTORY 
$ python -m SimpleHTTPServer 9000 


现在 可 以 在 浏览 器 中 加 载 URL http://localhost:9000/ ， 并 且 看 到 我 们 的 Angular 应 用 在 浏览 器 
中 运行 。 
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18.11 用 户 认证 / 鉴 权 

首先 ， 需 要 从 Google 获 得 一 个 cl ient_id 和 一 个 client_secret ， 这 样 才能 真正 地 与 Google 
Plus 登录 系统 进行 交互 。 

为 获取 一 个 应 用 ， 转 到 Google API 控 制 台 "， 并 且 创 建 一 个 项 目 ， 如 图 18-6 所 示 。 








ee9ee () 


htsps-/1dloud .google ,comjconsoleyredirected = trues /project?redirected ~true 


Welcome to the new Googo Cioud Congolel Profer te ckd console? Go bacx | Dismiss 
New Project 
Project rame ng4estapp 
Project ID strango tvefy 389 


VN have road and agree 和 加 Terms of Service for the Google Coud Plattorm products 
V ra lle to recelve emal about Googe Cioud Piatfom updases. special cfiers, and events. 


EE ~ 


图 18-6 ”创建 一 个 Google Plue 项 目 


点 击 名 称 打开 项 目 ， 然 后 点 击 APIs & auth 导 航 按钮 。 从 这 里 ,我 们 给 Google+API 授 权 。 找 
到 APIS 按 钮 ， 点 击 它 。 找 到 Google+ API 条 日， 并且 点 击 OFF 到 ON 滑 块 上 ， 如 图 18-7 所 示 。 








mtps://cloud.google,.com/console’redirected -trues /project/apps~strange-firefly- 389/2piul/ap 








Googie 
< ng-newsletter Nave STATUS 
Ensbied Googe* AP 
BwowyAPl 谭 Ea 
> 区 -本 
APls 
EN 
WAP! 交 EN 
区 -本 
oFF 
Ad Exchange Seber A orr 
Adamn SOK 
AcSonse Host Ai 
Aralyscs A oi 
oN orF 


图 18-7 ”授权 于 Google+ API 
设置 完 之 后 ， 我 们 需要 创建 并 且 注 册 一 个 应 用 ， 并 且 使 用 它 的 应 用 ID 来 进行 已 认证 的 调用 。 
找到 Registered apps 选 项 ， 点 击 它 以 创建 一 个 应 用 。 确 认 在 询问 应 用 类 型 时 选择 了 Web 











9 ALAN 


Application 选 项 ， 如 图 18-8 所 示 。 





QD https://developers.google.com/console 
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Hps :11cloud google.com/jconsole?redirected -trueg1prolect1395118764244/apiul/appyshow=reglster 


Register new application 
You nesa to regster yourappicaton to gt the recessany crecertials io cal a Googe AP 














图 18-8 ”创建 一 个 已 注册 的 应 用 
设置 好 了 之 后 , 我 们 到 达 了 应 用 详情 页 面 。 选 择 OAuth 2.0 Client ID 下拉 块 , 记 下 应 用 的 Client 
ID。 我 们 很 快 就 要 使 用 这 个 ID 了 。 
最 后 ， 把 localhost 源 添加 到 应 用 的 WEB ORIGIN 中 ， 这 样 保 证 我 们 能 够 在 本 地 使 用 这 个 API 
进行 开发 ， 如 图 18-9 所 示 。 


ftps:11cloud ,google,comjconsole7redirected-truep1project/3951187642441apiul/app/WEB1395118764244-$2cmo60784s6ocf707ub3pdi49p 





图 18-9 已 注册 应 用 的 详细 信息 

接 下 来 ， 我们 需要 创建 一 个 Google+ 登 录 指令 。 这 个 Angular 指 令 能 让 我 们 用 单个 文件 元 素 给 

应 用 添加 一 个 自 定义 登录 按钮 。 
有 关 指 令 的 更 多 信息 ， 请 参阅 第 8 章 。 

我 们 将 要 在 Google 登 录 上 添加 两 个 功能 : 一 个 会 被 添加 到 标准 Google 登 录 按 钮 上 的 元 素 ， 以 
及 一 个 在 按钮 被 演 染 之 后 运行 的 自 定义 函数 。 

当 要 使 用 Google+ 登 录 指令 在 页 面 上 包含 一 个 登录 元 素 时 ， 我 们 会 使 用 一 种 相当 简洁 的 指令 
定义 。 在 我 们 的 指令 中 ， 要 做 下 面 这 些 事情 : 

(1) 创建 一 个 DOM 元 素 ， 能 够 设置 样式 ( 使 用 一 个 模板 ); 

(2) 设置 在 指令 中 需要 的 Google+ 属 性 ; 
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(3) clientid; 

(4) 作用 域 ; 

(5) oauth 啊 应 的 回调 ; 

(6) 设置 结束 登录 响应 的 自 定义 回调 方法 ; 

(7) 允许 指令 的 用 户 基于 成 功 登陆 定义 一 个 自 定 的 函数 。 

上 面 列 出 的 我 们 指令 的 部 分 都 是 很 明确 的 , 可 以 在 下 面 的 完整 代码 中 看 到 。 上 面 列 表 中 的 一 
个 组 件 是 这 个 指令 独 有 的 ， 它 允许 用 户 定 义 一 个 方法 ， 在 成 功 登 录 之 后 运行 。 

在 隔离 的 作用 域 方法 中 , 我 们 会 添加 一 个 自 定义 函数 , 它 能 够 在 指令 中 指向 所 包含 的 作用 域 
上 定义 的 一 个 函数 。 为 了 做 到 这 个 , 我 们 会 使 用 & 符 号 来 告诉 Angular, 我 们 感 兴趣 的 是 绑 定 一 个 
函数 ， 而 不 是 简单 的 数据 。 


scope: { 
afterSignin: '&'" 














} 
有 关 绑 定 策略 的 更 多 信息 ， 参 见 10.3 节 。 
在 scripts/directives,js 中 的 最 终 指 令 如 下 所 示 


angular.module('myApp.dqirectives'，[]) 
.directive('googleSignin', function() { 
return { 
restrict: 'A', 
template: '<span id="signinButton"></span>', 
replace: true, 
scope: { 
afterSignin: '&'" 
} 
link: function(scope, ele, attrs) { 
// 设置 标准 的 google 类 
attrs.$set('class', 'g-signin'); 
// 设置 clientid 
attrs.$set('data-clientid', 
attrs.clientId+' .apps.googleusercontent .com' ); 
// 建立 作用 域 的 Ur1 
var scopes = attrs.scopes || [ 
‘auth/plus.1ogin', 
'auth/userinfo.email' 
I 
var scopeUrls = []; 
for (var i = 0; i «< scopes.length; i++) { 
scopeUrls.push('https://www.googleapis.com/'+scopes[i]); 


} 


// 创建 一 个 自 定 义 回调 方法 

var callbackld = "_googleSigninCallback", 
directiveScope = scope; 

window[callbackId] = function() { 
var oauth = arguments[0]; 
directiveScope.afterSignin({oauth: oauth}); 
window[callbackId] = null; 

所 


// 设置 标准 的 google 登 录 按钮 的 设置 
attrs.$set('data-callback', callbackId); 
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attrs.$set('data-cookiepolicy', 'single_host_origin'); 


attrs.$set('data-requestvisibleactions', 
'http://schemas.google.com/AddActivity') 
attrs.$set('data-scope', scopeUrls.join(' ')) 


// 最 后 ， 刷 新 客户 阁 库 
// 强迫 按钮 在 浏览 器 中 重 绘 
(function() { 
var po = document.createElement('script') 
po.type = 'text/javascript'; 
po.async = true; 


产 


产 


po.src = 'https://apis.google.com/js/client:plusone.js'; 
var s = document .getElementsByTagName('script')[0]; 


s.parentNode.insertBefore(po, s); 


})(); 


下 








尽管 这 个 指令 很 长 ,但 它 还 是 相当 简单 的 ,我 们 是 在 给 Google 按 钮 赋值 一 个 g-signin 样 式 类 ， 


添加 基于 传人 属性 的 Client ID， 建 立 作 用 域 ， 等 等 。 











这 个 指令 的 一 个 特有 部 分 是 我 们 在 窗口 自 定义 回调 函数 。 既然 Google 的 库 要 求 我 们 有 一 个 回 
调 函 数 , 以 便 在 登录 之 后 作 提醒 用 , 我 们 需要 在 指令 中 模拟 这 个 回调 。 使 用 window[callbackId] 


能 让 我 们 在 调用 这 个 函数 时 , 模拟 这 个 需要 在 JavaScript 中 调用 的 回 
本 地 的 afterSignin 动 作 。 


然后 ， 我 们 将 全 局 对 象 清理 掉 ， 因 为 在 AngularJS 中 是 比较 忌 计 











调 方法 , 能 让 我 们 真正 调用 到 





全 局 状态 的 。 


指令 准备 好 了 之 后 ,就 可 以 在 视图 中 包含 这 个 指令 了 。 我 们 将 在 视图 中 调用 指令 , 把 指令 上 





的 client-id 和 after-signin 属 性 奉 换 成 我 们 自己 的 ， 如 下 所 示 : 


确认 包含 了 oauth 参 数 . 正如 在 a fter-signup 属 性 中 写 的 








那样 。 我 们 必须 用 这 种 方 


式 调用 这 个 参数 ， 这 是 由 Angular 在 指令 中 调用 带 参数 方法 的 机 制 决 定 的 。 


<h2>Signin to ngroad</h2> 

《<div google-signin 
client-id='CLIENT_ID' 
after-signin="signedIn(oauth)"></div> 

<pre>{{ user | json }}¢/pre> 


本 示例 中 的 用 户 数据 就 是 登录 返回 的 access_token ( 如 果 登 录 了 的 话 )。 它 不 是 存 
在 我 们 的 服务 器 上 的 ， 也 不 是 敏感 数据 ， 而 且 会 在 我 们 离开 页 面 时 消失 。 


最 后 ， 我 们 需要 让 按钮 实 实在 在 地 引发 一 个 操作 ， 所 以 要 在 控制 锅 中 定义 after-signin 的 


方法 signedIn(oauth)。 
这 个 signedIn( ) 在 真实 的 应 用 中 为 我 们 消除 已 认证 的 页 面 。 


这 个 方法 会 是 重 定向 到 一 个 新 路 由 的 理想 位 置 (例如 ， 把 已 认证 的 用 户 导 向 


/dashboard 路 由 ), 


angular .module( 'myApp') 
.controller('MainController', 
function($scope) { 
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$scope.signedIn = function(oauth) { 
$scope.user = oauth 


} 








} > 
18.12 UserService 
在 更 加 深入 地 探讨 AWS 方 面 的 内 容 之 前 , 我 们 先 要 创建 一 个 Userservice, 用 于 持 有 新 用 户 。 
上 会 保持 当前 用 户 的 一 个 副本 。 











深 
UserService 会 处 理 与 AWS 后 端 交互 的 多 数 工 作 ， 并 | 
尽管 还 没有 对 添加 后 端 这 件 事 准 备 得 特别 充分 , 我 们 还 是 可 以 先 把 它 构 建成 持 有 一 个 用 户 


[1 


angular .module( 'myApp.services', 
.factory('UserService', function($q, $http) { 


例 的 持久 副本 。 
在 scripts/services.js 中 ， 我 们 创建 UserService 的 开始 部 分 : 


var service = { 
_user: null, 
setCurrentUser: function(u) { 
if (u && lu.error) { 


service._user = U; 
return service.currentUser(); 
} else { 
var d = $q.defer(); 
d.reject(u.error); 
return d.promise; 


} 


}, 

currentUser: function() { 
var d = $q.defer(); 
d.resolve(service._user); 


return d.promise; 


} 
3 
return service; 


尽管 这 个 设置 现在 还 有 些 人 为 的 痕迹 ， 但 我 们 要 的 是 在 服务 中 把 currentuser 固 化 的 功能 。 





}>; 
记 住 ， 服务 是 单 例 对 象 ， 它 们 存在 于 应 用 的 生命 周期 中 。 
至 此 , 我 们 可 以 把 用 户 设置 给 UserService ， 而 不 是 简单 地 在 signedIn( ) 函数 的 返回 中 设置 


用 户 ， 如 下 所 示 : 
angular.module('myApp ' ) 
-controller('MainController '， 
function($scope) { 
$scope.signedIn = function(oauth) { 
UserService.setCurrentUser(oauth) 


.then(function(user) { 
$scope.user = user; 





}); 
} 
要 让 我 们 的 应 用 能 运行 ， 需要 保持 真实 用 户 的 email， 这 样 我 们 可 以 提供 一 个 更 好 的 方法 ， 











3 
与 用 户 进行 交互 ， 并 且 通 过 用 户 保 存 一 些 持久 的 、 特 有 的 数据 。 
尊重 版 权 
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我 们 使 用 gapi .client.oauth2.userinfo.get() 方 法 来 获取 用 户 的 email 地 址 ， 而 不 仅仅 是 
持 有 用 户 的 access_token (以 及 其 他 的 各 种 访问 细节 )。 


在 UserService 中 ， 我 们 需要 通过 更 新 currentUser( ) 方 法 来 包含 这 个 功能 


VA 
和 
currentUser: function() { 
var d = $q.defer(); 
if (service._user) { 
qd.resolve(service._user) 
} else { 
gapi.client.oauth2.userinfo.get() 
.execute( function(e) { 
service._user = e; 
}) 
} 


return d.promise; 


} 
A se 


18.13 迁移 到 AWS 上 

现在 ， 正 如 我 们 在 刚 开 始 时 说 的 那样 ， 需 要 建立 带 有 AWS 服 务 的 鉴 权 。 

如 果 还 没有 AWS 账 号 的 话 ， 去 aws.amazon.com 注 册 一 个 吧 ， 免 费 而 且 快 速 。 

先 讲 重 要 的 : 创建 一 个 IAM 角 色 。IAM ( AWS's Identity and Access Management，AWS 的 认 
证 和 存 取 管理 服务 ) 是 AWS 服 务 如 此 强大 的 原因 之 一 。 有 了 IAM, 我 们 可 以 创建 对 系统 和 数据 的 
细 粒 度 访问 控制 。 

遗憾 的 是 , IAM 的 这 种 灵活 性 和 强大 也 让 它 变 得 有 些 复杂 , 所 以 我 们 在 此 介入 创建 它 的 过 程 
并 且 尽 量 把 它 弄 得 清晰 一 些 。 

通过 导航 到 IAM 控 制 台 !{， 并 且 点 击 Roles 导 航 连接 ， 我 们 来 创建 I AM 角色 。 

https://console.aws.amazon.com/iam/home?region=us-east-1#roles 

我 们 需要 点 击 Create New Role 按钮 来 给 新 角色 一 个 名 称 ， 我 们 把 它 命 名 为 google-web-role， 
如 图 18-10 所 示 。 








Spocity a ie rame Vou cannot eot me mle rame aer the oe w created 





Role Name: [sosle-wne-rel 
No Bt ae Une seh me wd 9 aas 


Continue 





图 18-10 ”创建 一 个 新 角色 
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这 样 我 们 可 以 管理 新 


型 ， 
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角色 对 AWS 服 务 的 存 取 ， 如 图 18-11 所 示 。 








第 18 
接 下 来 ， 需 要 把 IAM 角 色 配 置 为 Web Identity Provider Access 角 色 类 


©0008 /@wu 





Create Role 
OO 
Comune aoe 
Select Role Type 
-AWS Service Roles 
_ Role for Cross-Account Access 
© Role for Web ldentity Provider Access 
ie 
Alow users wah Amaron Facebook or Google 


图 18-11 设置 角色 类 型 
还 记得 我 们 在 前 面 用 Google 创 建 的 CLIENT ID 吗 ? 在 下 一 个 屏幕 中 ， 从 下 拉 框 中 选择 


U 


Google， 并 且 把 CLIENT ID 粘贴 到 Audience 杠 中。 





arokes 


这 一 步 把 我 们 的 AM 角色 和 Google 应 用 统一 起 来 了 ， 这样 我 们 的 应 用 可 以 用 一 个 已 认证 的 


0008 Gu x 
A mips //console aws-amazon.com/iam/home region ~us -es 


«ca 


Google 用 户 来 访问 AWS 服 务 ， 如 图 18-12 所 示 。 





to trust and men enter your, 


rr 


Add Condisons (OpEonag 
Continue 


图 18-12 Google 认证 


然后 ,点击 Verify Trust (下 一 屏幕 , 它 显示 了 AWS 服 务 的 原始 配置 ), 为 应 用 创建 我 们 的 策略 。 
策略 生成 器 是 建立 策略 的 快捷 方式 。 此 时 ， 必 须 设 置 用 户 能 进行 哪些 操作 ， 不 能 进行 哪些 


操作 。 
对 于 用 户 可 能 采取 的 行动 ， 我 们 要 努力 说 得 非常 具体 : 


在 具体 的 bucket 上 ( 在 我 们 的 示例 中 是 ng-newsletter-example ), 我 们 将 要 允许 用 户 进行 以 


1. S3 


下 操作 : 
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口 CetOb ject 
口 ListBucket 
口 PutOb ject 





S3 bucket 的 Amazon Resource Name (ARN ) 如 下 所 示 : 


arn:aws:s3:::ng-newsletter-example/* 


2. DynamoDB 

对 于 两 个 特有 的 表 资 源 ， 我 们 会 允许 以 下 操作 : 
口 Get Item 

口 PutItem 

口 Query 





DynamoDB 表 的 Amazon Resource Name 如 下 所 示 : 


[ 
"arn:aws:dynamodb:us-east-1:<ACCOUNT_ID> :table/Users", 
"arn:aws:dynamodb:us-east-1:<ACCOUNT_ID> :table/Usersltems" 


] 
我 们 策略 的 最 终 版 本 可 以 在 "找到 ， 如 图 18-13 所 示 。 


Bee /下 


< C 站 向 hps//console.awsamazon.com/iam/homeregion=us-east-1#roles 


CE 


Edit Permissions 
The pokcy generator enables you to create poicies mat Corol access go Amaron Web Services (AWS) 
Proouets and msources For more ntormason avout creating poicies. see Overview ot Polcles in Usng 
AWS ldensty and Access Management 
Eflect Mow@® Deny 


AWS Service | AWS CloudFomation 


Actions =— Soiect Actons — 


Amazon Resource Name ~ 
(ARN) 


Add Condsons (Opsonal) 





图 18-13 ”添加 IAM 策 略 
更 多 有 关 这 个 令 人 困惑 的 ARN 号 码 的 信息 ， 请 查阅 ”相应 的 Amazon 文 档 。 


我 们 需要 得 到 的 最 后 一 个 信息 是 Role ARN。 它 可 以 在 IAM 控 制 台 中 的 IAM 用 户 的 summary 选 
项 卡 中 找到 。 


记 下 这 个 字符 串 ， 稍 后 我 们 会 设置 它 ， 如 图 18-14 所 示 。 


CD http:/d.pr9Obg 
© http://docs.aws.amazon.com/general/latest/gr/aws-arns-and-namespaces.html 
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Dashboard [本 Role Actionsv by 坟 9 
4 
i x f1 ltems 
ovpe Role Name Creation Time 
User 
图 google-web-role 2013-11-04 17:21 PST 
Rol 
Password Policy 
1 Roles Selected 
坊 Role: goog 国 加 串 
Permissions | | Trust Relationships | | summary 


RoeARN amawsiar m::1 0m role/ google-web-role 


Instance Profile ARN(s) 


Path / 


Creation Time 2013-11-04 17:21 PST 


acy Policy & Terms of Use Feedback 





图 18-14 Role ARN 





鉴于 我 们 完成 了 创建 IAM 用 户 的 工作 ， 可 以 探讨 Angular 应 用 的 集成 了 。 


18.14 AWSService 
我 们 移动 一 下 应 用 的 根 ， 把 AWS 集 成 到 我 们 自己 的 服务 AwSService 中 ， 然 后 把 它 构 如 
鉴于 要 能 够 在 配置 阶段 能 对 服务 做 一 些 自 定义 的 配置 ， 我 们 把 它 创建 为 一 个 提供 者 。 


EE 出 来 。 














记 住 ， 唯 一 能 注入 到 .config() 函 数 的 服务 类 型 是 .provider() 类 型 。 
首先 ， 我 们 在 scripts/services.js 中 创建 provider 的 桩 : 


PS 
.provider('AWSService', function() { 


var self = this; 
self.arn = null; 


self.setArn = function(arn) { 
if (arn) self.arn = arn; 


} 


self.$get = function($q) { 
return {} 


} 
1 


我 们 已 经 能 够 看 到 ， 需 要 给 这 个 服务 设置 Role ARN， 这 样 能 把 适当 的 用 户 加 到 正确 的 服务 中 。 





像 上 面 一 样 把 AWSService 建 立 为 provider， 这 能 让 我 们 在 scripts/app.js 中 这 样 设置 : 


angular .module( 'myApp ' ， 


['ngRoute', 'myApp.services', 'myApp.dqirectives '] 


) 
.config(function(AWSServiceProvider) { 
AWSServiceProvider 
.SetArn( 
'arn:aws:iam: :<ACCOUNT_ID> :role/google-web-role' ) ; 
}) 
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现在 ， 可 以 继续 处 理 AwSService ， 不 用 担心 会 覆盖 我 们 的 Role ARN。 创建 这 个 提供 者 能 使 
在 不 同 应 用 之 间 分 享 变 得 非常 容易 ， 而 不 用 每 次 都 编写 自 定义 的 胶水 代码 。 

至 此 ， 我 们 的 AWSService 还 什么 都 没 干 。 我 们 所 需要 做 的 最 后 一 件 事 就 是 : 确保 是 在 给 真 
正 登 录 的 用 户 访 问 权 。 

后 的 步 又 就 是 ， 我 们 要 告诉 AWS 库 ， 有 一 个 已 认证 用 户 能 够 作为 I AM 角色 进行 操作 。 

我 们 把 这 个 凭证 创建 为 promise， 它 最 终 会 执行 ， 这 样 ， 我 们 可 以 定义 应 用 的 不 同 部 分 ,无 
需 为 检验 凭证 是 否 已 加 载 而 烦恼 ， 只 需 使 用 promise 上 的 .then() 方 法 。 

我 们 来 修改 服务 中 的 $get() 方 法 : 添加 一 个 叫做 setToken( ) 的 方法 ， 它 会 创建 一 套 新 的 
WebldentityCredentials: 

















Ve 
self.$get = function($q) { 
var credentialsDefer = $q.defer(), 
credentialsPromise = credentialsDefer .promise; 
return { 
credentials: function() { 
return credentialsPromise; 
和 
setToken: function(token，providerId) { 
var config = { 
RoleArn: self.arn, 
WebldentityToken: token, 
RoleSessionName: 'web-id' 
} 
if (ProviderId) { 
config['ProviderId'] = providerId; 
} 
self.config = config; 
AWS .config.credentials = 
new AWS.WebldentityCredentials(config); 
credentialsDefer 
.resolve(AWS.config.credentials); 


} 
二 


现在 ， 当 我 们 通过 登录 Google 获 取 oauth.access_token 时 ， 只 需 把 id_token 传 递 给 这 个 也 
数 ， 它 会 负责 AWS 的 配置 设置 。 


我 们 用 调用 setToken 的 方法 来 修改 userService 服 务 ， 如 下 所 示 : 














A es 
.factory('UserService', function($q, $http) { 
var service = { 
_user: null, 
setCurrentUser: function(u) { 
if (u && lu.error) { 
AWSService.setToken(u.id_token); 
return service.currentUser(); 
} else { 
var d = $q.defer(); 
d.reject(u.error); 
return d.promise; 
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18.15 在 Dynamo 上 开始 


在 应 用 中 ， 我 们 想 把 一 个 用 户 上 传 的 所 有 图 像 都 关联 到 这 个 唯一 的 用 户 。 要 创建 这 个 关联 ， 
我 们 会 创建 一 个 Dynamo 表 存储 用 户 ， 男 外 一 个 存储 用 户 和 用 户 上 传 文件 的 关联 关系 。 
要 开始 跟 Dynamo 打 交道 , 首先 要 初始 化 一 个 Dynamo 对 象 。 我 们 在 AWSService 服 务 对 象 中 做 
这 件 事 ， 就 像 这 样 : 
7 es 


setToken: function(token, providerId) { 


LY Es 








和 
dynamo: function(params) { 
var d = $q.defer(); 
credentialsPromise.then(function() { 
var table = new AWS .DynamoDB(params); 
d.resolve(table); 


}93 


return d.promise; 


}, 
17 寺 


正如 之 前 讨论 的 那样 ,通过 在 服务 对 象 中 使 用 promise， 只 需 使 用 promise 的 .then() API 方 法 
来 确保 凭证 在 使 用 之 初 就 已 经 被 设置 好 了 。 

你 可 能 会 问 , 为 什么 我 们 要 用 dynamo 方 法 来 设置 参数 。 有时, 我 们 会 要 用 不 同 的 配置 和 不 同 
的 设置 跟 DynamoDB 交 互 ， 对 于 这 样 的 交互 , 我们 可 能 会 需要 重新 创建 已 经 在 页 面 里 用 过 一 次 的 
对 象 。 

我 们 可 以 使 用 内 置 的 Angular $cacheFactory 服 务 来 缓存 不 同 的 AWS 对 象 ， 而 不 




















进行 复制 。 


fo 





18.16 $cacheFactory 


$cacheFactory 服 务 让 我 们 能 在 需要 的 时 候 创建 一 个 对 象 ， 或 者 在 之 前 已 经 用 过 的 情况 下 回 
收 和 重用 一 个 对 象 。 


要 开始 缓存 ， 我 们 先 要 创建 一 个 dynamoCache 对 象 ， 在 这 里 存储 缓存 的 Dynamo 对 象 : 


HY 
self.$get = function($q, $cacheFactory) { 
var dynamoCache = $cacheFactory('dynamo'), 
credentialsDefer = $q.defer(), 
credentialsPromise = credentialsDefer .promise; 





return { 


ie 


回 到 gdynamo 方 法 中 ,如 果 对 象 在 缓存 中 存在 的 话 , 可 以 把 它 拖 出 来 用 , 或 者 可 以 在 需要 的 时 
修 让 它 创建 这 个 对 象 : 
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pL A 
dynamo: function(params) { 
var d = $q.defer(); 
credentialsPromise.then(function() { 
var table = 
dynamoCache .get(JSON.stringify(params)); 
if (!table) { 
var table = new AWS.DynamoDB(params ) ; 
dynamoCache .put(JSON.stringify(params)，table); 


5 
d.resolve(table); 
} 
return d.promise; 
}; 
jy 


18.17 保存 currentUser 


用 户 登 录 和 我 们 获取 他 的 email 时 ， 就 是 一 个 把 用 户 添加 到 我 们 用 户 数据 库 的 好 时 机 。 


为 了 创建 一 个 dynamo 对 象 ， 我 们 需要 再 次 使 用 promise APT 方 法 .then()， 这 次 是 在 服务 外 。 
我 们 创建 一 个 对 象 ， 它 能 让 我 们 跟 在 Dynamo API 控 制 台 创 建 的 用 户 表 交 互 。 


我 们 需要 在 首次 运行 应 用 时 手动 创建 这 些 Dynamo 表 ， 因 为 直接 给 我 们 的 Web 用 户 
创建 dynamo 表 的 权限 是 不 安全 的 。 


为 了 创建 一 个 Dynamo 表 ， 我 们 要 打开 Dynamo 控 制 台 ”， 找 到 Create Table 按 钮 。 


我 们 想 要 创建 一 个 叫做 Users 的 表 , 其 主键 类 型 为 Hash。Hash Property Name 将 会 是 一 个 主键 ， 
我 们 会 用 它 在 表 上 存 取 对 象 。 我 们 会 对 这 个 示例 程序 使 用 字符 串 : User email， 如 图 18-15 所 示 。 


e006 TT < 


Primary Key Type: Hash and Range @Mash 


Sting _ Number _ Sinary 
Mash Attribute Name: User emal 


1 Choose a hash attribute that ensures that your workload 1s evenly distributed 
Deross hash keys. 
For example, ”| hash key, while “Game ID" would be a 
bad cholce ff 

Learn more 


Customer IDr Is 3 good 
most of your traffic relates to a few Popular games. 
bous choosing Your primary key 


a mary 


Contnuve 站 








图 18-15 ”创建 Users Dynamo 表 


当 我 们 点 击 到 后 面 两 屏 时 ， 会 通过 输入 email 的 方式 ， 建 立 一 个 基本 的 提醒 。 尽 管 这 个 步骤 
不 是 100% 必 要 的 ， 但 很 容易 忘记 我 们 的 表 还 在 创建 中 。 如 果 没 有 提醒 的 话 ， 可 能 就 永远 把 它们 
忘 在 那里 了 。 


GD https://console.aws.amazon.com/dynamodb/home 18 
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我 们 点 击 到 最 终 的 review 屏 幕后 ， 点 击 create， 我 们 将 会 得 到 一 个 全 新 的 Dynamo 表 ， 用 户 会 
被 存储 在 那里 。 


当 我 们 在 控制 台 的 时 候 ， 需 要 创建 连接 表 。 这 个 表 把 用 户 和 用 户 上 传 的 东西 关联 起 来 。 


我 们 必须 返回 , 再 次 找到 Create Table 按 钮 , 创建 一 个 叫做 UsersItems 的 表 , 其 主键 类 型 为 Hash 
and Range。 对 于 这 个 表 来 说 ,Hash Attribute Name 也 是 User email, Range Attribute Name 则 是 ItemId。 


用 这 种 方式 建立 表 ， 能 让 我 们 基于 email 查 询 所 有 创建 了 上 传记 录 的 用 户 。 
接 下 来 的 一 个 屏幕 上 剩 下 的 选项 是 可 选 的 ， 可 以 点 击 过 掉 。 
此 时 ， 我们 就 有 了 两 个 可 用 的 dynamo 表 。 


回 到 userservice， 我 们 首先 查询 这 个 表 ， 看 看 用 户 是 不 是 已 经 存储 在 数据 库 中 了 ; 如 果 没 
有 ， 就 在 我 们 的 Dynamo 数 据 库 中 创建 一 条 记录 。 















































var service = { 
_user: null, 
UsersTable: "Users", 
UserltemsTable: "Usersltems", 
Wf sat 
currentUser: function() { 
var d = $q.defer(); 
if (service._user) { 
d.resolve(service._user); 
} else { 
// 加 载 了 证 书 之 后 
AWSService.credentials().then(function() { 
gapi.client.oauth2.userinfo.get() 
.execute(function(e) { 
var email = e.email; 
// 为 UsersTable 
// 为 UsersTable 获 取 dynamo 实 例 
AWSService.dynamo({ 
params: {TableName: service.UsersTable} 
}) 
.then(function(table) { 
// 根据 email 找 到 用 户 
table.getItem({ 
Key: {'User email': {S: email}} 
}, function(err, data) { 
if (Object.keys(data).length == 0@) { 
// 用 户 之 前 不 存在 
// 所 以 创建 一 条 记录 
var itemParams = { 
Item: { 
'User email': {S: email}, 
data: { S: JSON.stringify(e) } 
} 





table.putItem(itemParams ， 
function(err, data) { 
service._user = e; 
d.resolve(e); 
}); 
} else { 
// 用 户 已 经 存在 


service._user = 
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JSON.parse(data.Item.data.s); 
d.resolve(service._user); 


return d.promise; 


}, 
A Hn 





尽管 看 起 来 代码 很 多 ,但 它 只 是 在 我 们 的 DynamoDB 上 作 了 一 个 基于 用 户 名 的 查找 或 者 


创建 。 
此 时 ， 我 们 终于 可 以 回 到 视图 上 看 看 发 生 了 什么 。 








在 templates/main.html 文 件 中 添加 一 个 容器 ， 它 只 是 在 用 户 不 存在 的 时 候 显 示 登 录 状态 ， 在 








用 户 已 经 存在 时 显示 用 户 详 情 。 
我 们 用 简单 的 ng-show 指 令 和 新 的 google-signin 指 令 来 完成 添加 。 


<div class="container"> 
<h1i>Home</h1> 
<div ng-show="!user" class="row"> 
<div class="col-md-12"> 
<h2>Signup or login to ngroad</h2> 
<div google-signin 
client-id='395118764200 
after-signin="signedIn(oauth)"></div> 
</div> 
</div> 
<div ng-show="user"> 
<pre>{{ user | json }}¢/pre> 
</div> 
《diVy 








视图 设置 好 之 后 ， 可 以 在 第 二 个 cdiv* 中 跟 已 登录 的 用 户 互动 (在 生产 中 ， 把 它 做 成 单独 的 








路 由 会 比较 好 )。 


18.18 上 传 到 S3 








由 于 已 登录 用 户 已 经 存在 于 Dynamo 中 ， 是 时 候 创 建文 件 上 传 功能 、 


直接 

















巴 文件 存 到 S3 了 。 


首先 , 我 们 来 简单 了 解 一 下 跨 域 资源 共享 ( Cross-Origin Resource Sharing， 以 下 简称 CORS )。 
它 是 一 种 现代 浏览 器 支持 的 安全 特性 ， 允 许 我 们 使 用 一 个 标准 协议 来 对 不 同 域 作出 请 求 。 









































幸好 ，AWS 团 队 已 经 把 支持 CORS 变 得 非常 简单 。 如 果 我 们 把 自己 的 网 站 托管 在 S3 上 ， 其 至 








都 不 需要 设置 CORS (除了 为 了 开发 的 目的 )。 








要 在 一 个 bucket 上 启用 CORS, 先 要 转 到 S3 控 制 台 ”, 并 且 找 到 我 们 要 用 来 上 传 文件 的 bucket。 





对 于 这 个 示例 ， 我 们 使 用 的 是 ng-newsletter-example bucket。 





@ https://console.aws.amazon.com/s3/home 
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定位 到 这 个 bucket 之 后 ， 我 们 在 它 上 面 点 击 ， 加 载 Properties 选 项 卡 ， 展 开 Permissions 选 项 。 
从 这 里 ， 我 们 点 击 Add CORS configuration 按 钮 ， 选 择 标准 的 CORS 配 置 ， 如 图 18-16 所 示 。 





Boekets 【govnener econs Configuration Editor Cy 
Wom oscuro 
The bucket wr: 





"logging 


2008 ~ 204, Ameaon Web Servicen, nc. or ts seten. A reper reserves. = privacy Pecy Tarms of Une 

















图 18-16 在 S3 bucket 上 启用 CORS 
我 们 要 创建 一 个 简单 的 文件 上 传 指令 ， 提 供 一 个 用 HTML5 File API 来 处 理 文件 上 传 的 方法 。 
这 样 ， ey 文件 上 传 会 立即 开始 。 
为 了 处 理 文件 选择 指令 , 我 们 创建 一 个 简单 的 指令 绑 定 到 change 事 件 上 , 并 且 在 文件 被 选择 
之 后 调用 一 个 方法 。 
个 指令 很 简单 ， 如 下 所 示 : 








A 
.directive('fileUpload', function() { 
return { 
restrict: 'A', 
scope: { fileUpload: '&' }, 
template: '<input type="file" id="file" /> ', 
replace: true, 
link: function(scope, ele, attrs) { 
ele.bind('change', function() { 
var file = ele[0|] .files; 
if (file) scope.fileUpload({files: file}); 
}) 
} 
} 
}) 


我 们 可 以 这 样 在 视图 中 使 用 这 个 指令 ， 如 下 所 示 : 


《!-- ... ——> 
<div class="row" 
<div class="col-md-12"> 
<div file-upload="onFile(files)"></div> 
</div> 
</div> 


现在 ， 当 作出 文件 选择 的 时 候 ， 它 就 会 调用 当前 作用 域 上 的 onFile(files ) 方 法 。 


尽管 在 这 里 我 们 正在 创建 自己 的 文件 指令 ， 还 是 推荐 查验 一 下 ngUpload [https:/ 
github.com/twilson63/ngUpload]， 以 处 理 文件 上 传 。 
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在 onFile(files) 方 法 中 ， 我 们 要 处 理 文件 上 传 到 $3 ， 并 且 将 记录 保存 到 我 们 的 Dynamo 数 
据 库 表 。 我 们 想 做 Angular 好 公民 ， 把 这 个 功能 放 在 userService 服 务 中 ， 而 不 是 放 在 控制 器 里 。 


首先 ， 需 要 确认 我 们 有 这 个 能 力 获取 一 个 S3 JavaScript 对 象 ， 就 像 我 们 让 dynamo 可 用 那样 。 


VN 
var dynamoCache = $cacheFactory('dynamo'), 
s3Cache = $cacheFactory('s3Cache' ) ; 

















s3: function(params) { 
var d = $q.defer(); 
credentialsPromise.then(function() { 
var s30bj = s3Cache.get(JSON.stringify(params)); 
if (!s30bj) { 
var s30bj = new AWS.S3(params ) ; 
s3Cache.put(JSON.stringify(params), s30bj); 
} 
d.resolve(s30bj ) ; 
有， 
return d.promise; 
}, 
ee 


这 个 方法 与 Dynamo 对 象 创建 的 运行 方式 相同 ， 它 让 我 们 可 以 直接 对 S3 实 例 对 象 进行 访问 。 
我 们 很 快 就 会 看 到 这 一 点 。 





18.19 ”处 理 文件 上 传 


为 了 处 理 文 件 上 传 ,我 们 需要 在 UserService 中 创建 一 个 叫做 uploadItemForSale( ) 的 方法 。 
出 于 规划 的 目的 ， 就 功能 而 言 ， 我 们 想 要 : 


口 将 文件 上 传 到 S3; 
口 为 该 文件 获取 一 个 signedUrl; 
口 将 这 个 信息 保存 到 数据 库 。 


我 们 将 要 在 这 个 过 程 中 使 用 当前 用 户 ， 所 以 必须 先 确认 这 个 用 户 存 在 ， 然 后 获取 一 个 实例 : 


// 在 scripts/services.js 中 
A ee 
I 
Bucket: 'ng-newsletter-example', 
uploadItemForSale: function(items) { 
var d = $q.defer(); 
service.currentUser().then(function(user) { 
// 处 理 上 传 
AWSService.s3({ 
params: { 
Bucket: service.Bucket 











} 
}).then(function(s3) { 
// 我 们 在 S3 对 象 中 
// 有 一 个 s3 bucket 和 句柄 
}); 
} 7 





图 灵 社 区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 








return d.promise; 


}, 
Hh a 


S3 bucket 的 句柄 让 我 们 得 以 创建 一 个 可 供 上 传 的 文件 。AWS 在 上 传 到 S3 的 时 候 需 要 三 个 参数 。 
口 Key: 文件 对 象 的 键 。 

口 Body: 文件 自 导 的 blob。 

口 ContentType: 文件 类 型 。 

所 垃 ， 当 我 们 从 浏览 器 获取 文件 对 象 的 时 候 ， 它 上 面 的 信息 都 是 可 用 的 。 











Ps 
// 处 理 上 传 
AWSService.s3({ 
params: { 
Bucket: service.Bucket 
} 
}).then(function(s3) { 
// 我 们 在 S3 对 象 中 
// 有 s3 bucket 句 柄 
var file = items[0]; // 获取 第 一 个 文件 
var params = { 
Key: file.name, 
Body: file, 
ContentType: file.type 
} 


s3.putObject(params, function(err, data) { 
// 文件 已 经 上 传 
// 或 者 上 传 过 程 中 出 错 
六 
})3 
J ys 


S3 在 上 传 文件 时 默认 处 于 受 保护 状态 。 它 什么 都 不 用 做 , 就 可 以 防止 我 们 把 文件 上 传 并 且 开 
放 给 公众 。 这 个 特性 保证 了 我 们 上 传 到 S3 的 所 有 东西 都 是 受 保护 的 , 迫使 我 们 在 决定 哪些 文件 要 
公开 或 者 不 要 公开 的 问题 上 作出 理智 的 选择 。 

记 住 这 一 点 后 , 我 们 来 创建 一 个 临时 地 址 , 它 会 在 一 个 给 定时 间 之 后 失效 。 在 ngroad 市 场 中 ， 
这 个 URL 会 在 供出 售 的 每 个 东西 上 提供 一 个 失效 时 间 。 

在 任何 情况 下 , 要 创建 一 个 临时 URL ,我 们 都 先 要 获取 一 个 signedURL , 并 且 把 它 存储 在 Users 
Item 关 联 表 中 : 


Pf i 
s3.putObject(params, function(err, data) { 
if (lerr) { 
var params = { 
Bucket: service.Bucket, 
Key: file.name, 
Expires: 900*x4 // 1 hour 






































二 
s3.getSignedUrl('getObject', params, 
function(err, url) { 
// 现在 有 了 url 
}); 
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所 7 
] ) ; 
We 


最 终 ， 我 们 可 以 随 上 传 的 文件 一 起 ， 把 User 对 象 保存 在 关联 表 中 : 


A 
s3.getSignedUrl('getObject', params, 
function(err, url) { 
// 现在 有 了 url 
AWSService.dynamo({ 
params: {TableName: service.UserItemsTable} 
}).then(function(table) { 
var itemParams = { 
Item: { 
'ItemIld': {S: file.name}, 
'User email': {S: user.email}, 
data: { 

S: JSON.stringify({ 
itemId: file.name, 
itemSize: file.size, 
itemUrl: url 


}) 


} 
3 
table.putItem(itemParams, function(err, data) { 
d.resolve(ldata); 
}); 
}); 
站 
JI 


这 个 方法 的 完整 版 在 : https://gist.github.com/auser/7316267#file-services-js-L98。 
我 们 可 以 在 控制 器 的 onFile 方 法 中 使 用 这 个 新 方法 ， 编 写 的 代码 类 似 于 : 


$scope.onFile = function(files) { 
UserService.uploadItemForSale(files) 
.then(function(data) { 
// 刷新 当前 供出 售 的 商品 
}) 


18.20 查询 Dynamo 


在 理想 情况 下 ,我 们 想 要 能 列 出 某 个 用 户 能 购买 的 所 有 产品 。 为 了 列 出 这 些 可 能 购买 的 物品 ， 
我 们 会 使 用 query API。 


Dynamo 查 询 API 有 些 深奥 ， 乍 一 看 相当 混乱 。 





| Dynamo 的 文档 : http://docs.aws.amazon.com/amazondynamodb/latest/APIReference/ 
API Query.html。 


我 们 基本 上 会 使 用 比较 操作 符 来 匹配 对 象 模 式 ， 比 如 说 equal、1t (小 于 )、gt (大 于 ), 或 
者 其 他 任何 更 多 的 操作 符 。 我 们 的 连接 表 的 键 是 User email 键 ， 所 以 我 们 要 把 这 个 键 作为 查询 的 
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键 ， 匹 配 到 当前 用 户 的 email。 





查询 数据 库 : 
A a 
itemsForSale: function() { 
var d = $q.defer(); 
service.currentUser().then(function(user) { 
AWSService.dynamo({ 
params: {TableName: service.UserItemsTable} 
}).then(function(table) { 
table.query({ 
TableName: service.UserltemsTable, 
"EQ", 


KeyConditions: { 
"User email": { 
"ComparisonOperator": 
"AttributeValueList": [ 
{S: user.email} 
] 
} 
} 
}, function(err, data) { 


var items = []; 
if (data) { 

angular .forEach(data.Items, function(item) { 
items .push(JSON.parse(item.data.Ss)); 


及 
d.resolve(items ) 


} else { 
d.reject(err); 


} 
}) 
}); 


}); 
return d.promise; 


}, 
HY 
在 上 面 的 查询 中 ，KeyConditions 和 “User email” 都 是 必 选 


18.21 在 HTML 显示 列表 





t 





作用 域 上 的 一 个 属性 : 
var getItemsForSale = function() { 
UserService.itemsForSale() 
.then(function(images) { 
$scope.images = images; 


}); 


} 
// 初始 加 载 用 户 列表 
getItemsForSale( ); 
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正如 我 们 对 属于 用 户 的 其 他 API 做 的 那样 ， 我 们 在 UserService 里 面 创建 了 一 个 方法 ， 用 于 





为 了 在 HTML 中 显示 用 户 的 图 像 ,我 们 只 是 把 新 的 itemsForSale( ) 方 法 的 返回 值 赋 给 控 





现在 我 们 可 以 轻松 地 使 用 ng-repeat 指 令 迭 代 出 列表 中 的 项 ， 如 图 18-17 所 示 。 
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<1l—— ... ——> 
<div ng-show="images"> 
<div class="col-sm-6 col-md-—4" 
ng-Tepeat="image in images"> 
<div class="thumbnail"> 
<img ng-click="sellIlmage( image)" 
data-ng-src="{{image.itemUr1}}" /> 
</div> 
</div> 
/div> 





图 18-17 图像 清 单 


18.22 出售 我 们 的 作品 


我 们 建立 在 AWS 基 础 上 的 演示 应 用 还 差 一 步 要 做 ， 就 是 从 单 页 应 用 创建 交易 。 

为 了 开始 处 理 和 接受 支付 , 我 们 要 创建 一 个 StripeService, 它 为 我 们 处 理 创 建 费 用 的 工作 。 
既然 我 们 想 要 在 模块 的 .config() 方 法 中 配置 Stripe， 那 就 需要 创建 一 个 .provider()。 

这 个 服务 自身 是 非常 简单 的 ， 因 为 它 把 脏 活 累 活 都 留 给 Stripe,js 库 去 做 了 。 


ts 
.provider('StripeService', function() { 
var self = this; 














self.setPublishableKey = function(key) { 
Stripe.setPublishableKey(key); 
} 


self.$get = function($q) { 
return { 
createCharge: function(obj) { 
var d = $q.defer(); 


if (lobj.hasOwnProperty('number') || 
lobj.hasOwnProperty('cvc') || 
lobj.hasOwnProperty('exp_month') || 
lobj .hasOwnProperty( 'exp_year ' ) 

后 
d.reject("Bad input", obj); 
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} else { 
Stripe.card.createToken(obj, 
function(status, resp) { 
if (status == 200) { 
d.resolve(resp); 
} else { 
d.reject(status); 


所 
} 


return d.promise; 


} 
1 


如 果 你 没有 Stripe 账 号 ， 那 就 到 stripe.com" 注 册 一 个 。Stripe 是 一 个 非常 适合 开发 人 员 的 支付 
处 理 网 关 ， 这 使 得 它 对 于 创建 我 们 的 ngroad 市 场 来 说 非常 理想 。 


一 旦 我 们 有 了 账号 ， 就 想 找 到 Account Setting 页 面 ， 定 位 到 API Keys 页 面 。 我 们 的 第 一 件 事 是 
要 找到 publishable key ( 可 以 是 不 真正 产生 费用 的 测试 版 ， 也 可 以 是 生产 版 本 )， 并 且 把 它 记 一 下 。 


在 我 们 的 scripts/app.js 文 件 中 ， 我 们 只 是 添加 了 下 面 的 代码 ， 并 且 把 “pk test YOUR_KEY” 
这 个 publishable key 替 换 成 了 自己 的 。 


WA 
.config(function(StripeServiceProvider) { 
StripeServiceProvider 
.SetPublishableKkey( 'pk_test_YOUR_KEY ' ) ; 


























}) 


18.23 使 用 Stripe 
当 用 户 点 击 他 喜欢 的 图 像 时 ,我们 在 浏览 器 中 打开 一 个 表单 ， 获 取信 用 卡 信息 。 我 们 要 设置 
这 个 表单 ， 让 它 提 交 到 控制 锅 上 一 个 叫 submitPayment() 的 操作 。 


注意 到 在 上 面 有 图 像 缩 略图 的 地 方 ， 我 们 包含 了 一 个 操作 ， 当 图 像 被 点 击 时 ， 调 用 图 像 的 
sellImage( ) 操 作 。 


在 MainController 中 实现 sel1lImage( ) 也 数 ， 如 下 所 示 : 











yo A 

$scope.sellImage = function(image) { 
$scope.showCC = true; 
$scope.currentItem = image; 


} 
yo 


现在 ， 当 图 像 被 点 击 时 ，showcc 属 性 会 是 true ， 我 们 可 以 显示 信用 卡 表单 。 下 面 是 一 个 极 
简 表 单 : 


<div ng-show="showCC"> 
<form ng-submit="submitPayment()"> 








GD http://stripe.com 
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<Span ng-bind="errors"></span> 

<span>Card Number/spany 

<input type="text" 
ng-minlength="16" 
ng-maxlength="20" 
Size="20" 
data-stripe="number" 
ng-model="charge.number" /> 

<span>CVC</span> 

<input type="text" 
ng-minlength="3" 
ng-maxlength="4" 
data-stripe="cvce" 
ng-model="charge.cvce" /> 

<span>Expiration (MM/YYYY)</span> 

<input type="text" 
ng-minlength="2" 
ng-maxlength="2" 
Size="2" 
data-stripe="exp_month" 
ng-model="charge.exp_month" /> 

<span> / «</span> 

<input type="text" 
ng-minlength="4" 
ng-maxlength="4" 
Size="4" 
data-stripe="exp-year" 
ng-model="charge.exp_year" /> 

“<input type="hidden" 
name="email" 
value="user .email" /> 

<button type="submit">Submit Payment</button> 

</ form> 
</jdiv> 


我 们 几乎 是 完全 把 作用 域 上 的 charge 对 象 绑 定 到 表单 了 ， 在 创建 费用 时 ， 会 用 到 它 。 


这 个 表单 自身 提交 到 控制 器 作用 域 上 的 submitPayment( ) 函数 。submitPayment( ) 函数 如 下 
所 示 : 


Lh sd 
$scope.submitPayment = function() { 
UserService 
.createPayment($scope.currentIitem, $scope.charge) 
.then(function(data) { 
$scope.showCC = false; 























}); 
} 
J a 


为 了 能 接受 费用 , 我 们 不 得 不 做 的 最 后 一 件 事 是 实现 UsersService 上 的 createPayment() 方 法 。 


现在 , 既然 我 们 是 在 客户 端 做 支付 , 从 技术 上 讲 是 不 可 能 处 理 支 付 的 , 只 能 接受 stripeToken。 
可 以 设置 一 个 后 台 进 程 来 管理 Stripe 令 牌 到 真实 支付 的 转变 。 


在 createPayment( ) 函数 中 ， 我 们 需要 调用 StripeService 来 生成 一 个 stripeToken。 人 然后， 
我 们 把 这 个 支付 添加 到 一 个 Amazon SQS 队 列 中 ， 这 样 后 台 进 程 可 以 创建 费用 。 


首先 ， 我 们 使 用 AWS 服 务 来 访问 SQS 队 列 。 
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需要 集成 稍微 多 一 点 东西 ， 因 为 这 个 服务 要 求 我 们 有 





第 18 章 
不 像 其 他 的 服务 ， 要 让 SQS 服 务 运 行 ， 
一 个 URL 来 跟 它 们 交互 。 在 我 们 的 AWSService 服 务 对 
一 个 新 对 象 . 不 过 , 这 个 流程 背后 的 原理 还 是 完全 -上 


日 改 成 每 次 使 用 生成 的 服务 对 象 时 创 到 


pA 
self.$get = function($q, $cacheFactory) { 
var dynamoCache = $cacheFactory('dynamo'), 


s3Cache = $cacheFactory('s3Cache'), 
sqsCache = $cacheFactory('sqs' ) ; 
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YY es 
sqs: function(params) { 
var d = $q.defer(); 

credentialsPromise.then(function() { 

var url = sqsCache.get(JSON.stringify(params)), 

queued = $q.defer(); 
if (lurl) { 
var sqs = new AWS.SQS(); 


sqs.createQueue(params, 
function(err, data) { 


if (data) { 
url = data.QueueUrl; 
sqsCache.put(JSON.stringify(params), url); 
queued.resolve(ur!1); 


} else { 
queued.reject(err); 


} 
jo 


} else { 
queued .resolve(url); 


} 
queued.promise.then(function(ur1l) { 
var queue = 

new AWS.SQS({params: {QueueUrl: url}}); 


d.resolve(queue ) ; 


}); 


| 象 中 ， 我 们 需要 缓存 正在 处 理 的 URL， 并 


的 。 








}) 
return d.promise; 


pA 


队列 的 对 象 上 调用 JSON. stringify。 


/a 
ChargeTable: "UserCharges", 
WA a 
createPayment: function(item, charge) { 
var d = $q.defer(); 
StripeService.createCharge(charge) 
.then(function(data) { 
var stripeToken = data.id; 
AWSService.sqs( 
{QueueName: service.ChargeTable} 
) .then( function(queue) { 
queue .sendMessage({ 
MessageBody: JSON.stringify({ 
item: item, 
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发 送 简 单 信息 ， 比 如 带 有 字符 串 和 数字 的 信息 。 它 不 能 发 送 对 象 , 所 以 我 们 需要 在 任 


~ 
意 想 


现在 ,我们 可 以 在 createPayment( ) 函数 中 使 用 SQS 了 。SQS 服 务 的 一 个 注意 事项 是 它 只 外 
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stripeToken: stripeToken 
}) 
}, function(err, data) { 
d.resolve(ldata); 
}) 
}) 
}, function(err) { 
d.reject(err); 
] 5 
return d.promise; 


} 
当 我 们 提交 表单 的 时 候 …… 如 图 18-18 所 示 。 


CS - Ee 





Card Number 4242424242424242 CYC 123 Expiation MWY 10 /Po 


图 18-18 ”处 理 支 付 
我 们 的 SQS 队 列 增长 了 ， 并 且 正 好 有 一 个 支付 等 竺 完成， 如 图 18-19 所 示 。 








Mtps: / /console aws-amazon.com/sqas /home region us-east-1 





ivaey Peey Terms of Uwe Feedback 


图 18-19 ”SQS 队 列 


18.24 ”使 用 Firebase 的 无 服务 器 应 用 


作为 一 个 客户 端 框架 ， 单 单 Angular 是 不 足以 创建 一 个 完整 的 后 端 应 用 的 。 通 常 很 难 知道 什 
么 时 候 要 跟 后 端 同步 数据 ， 怎 么 在 修改 内 容 的 版 本 之 间 处 理 数据 的 变更 和 潜在 冲突 。 18 
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设想 我 们 在 同一 时 间 有 应 用 的 两 个 实例 在 运行 。 如 果 两 个 实例 都 企图 编辑 相同 的 数据 会 怎 
样 ? 不 处 理 这 种 情况 的 话 ， 就 会 出 现 问题 ， 特 别 是 如 果 我 们 创建 的 是 一 个 复杂 的 Web 应 用 前 端 ， 
比如 银行 。 


通过 使 用 Firebase, 我 们 能 给 Angular 应 用 轻松 地 添加 一 个 后 端 。 在 Angularjs 主 页 上 出 现 之 后 ， 
Firebase 很 快 就 会 成 为 Angular 持 久 化 的 标准 。 


Firebase 是 一 个 实时 后 端 ， 用 于 创建 协同 化 的 现代 应 用 。Firebase 让 我 们 能 够 快速 启动 应 用 并 
将 它 运 行 起 来 , 而 不 是 要 求 我 们 忙 着 使 用 一 个 服务 端 组 件 来 创建 自 定义 的 请 求 响应 模型 ,还 要 在 
该 模型 中 手动 处 理 数据 的 同步 。 我 们 可 以 完全 用 Angular 创 建 一 个 以 数据 为 中 心 的 Web 应 用 , 它 能 
够 开 箱 即 用 ， 实 时 更 新 所 有 的 客户 端 。 

存储 在 Firebase 中 的 数据 是 标准 的 无 模式 JSON ,这 使 得 在 Firebase 中 存储 任意 类 型 的 数据 模型 
非常 容易 。 如 果 一 个 设备 丢失 了 网 络 连接 ，Firebase 继 续 人 允许 对 本 地 缓存 数据 的 存 取 ， 并 且 当 设 
备 重新 上 线 的 时 候 ， 无 缝 地 跟 云端 同步 变更 。 

Firebase 客 户 端 库 和 REST API 提 供 了 从 任何 平台 对 数据 的 易 访问 性 。 尽 管 我 们 更 关注 的 是 
Angular， 这 个 事实 意味 着 本 地 应 用 或 者 其 他 的 服务 端 应 用 也 可 以 访问 Angular 保 存 的 数据 。 


当 我 们 要 对 外 发 布 应 用 的 一 个 版 本 时 ， 可 使 用 Firebuse 的 一 个 托管 服务 ， 几 秒 钟 之 内 将 我 们 
的 Angular 应 用 从 命令 行 部 署 到 我 们 自己 的 域 。 















































18.25 ”使 用 Firebase 和 Angular 的 三 方 数据 绑 定 


有 了 Angular， 把 内 容 泻 染 到 浏览 器 是 很 容易 的 。Firebase 是 Angular 一 个 出 色 的 伙伴 ， 因 为 它 
优雅 地 处 理 了 数据 的 存 取 ， 这 是 产品 级 Web 应 用 的 另 一 个 主要 组 件 。 

Angular 的 伟大 之 处 在 于 , 它 在 JavaScript 模 型 和 DOM 之 间 的 双向 数据 绑 定 。 通 过 Angular 模 型 
与 Firebase 的 同步 ， 我 们 可 以 实时 同步 所 有 客户 端 上 的 应 用 模型 。 这 意味 着 当 一 个 客户 端的 数据 
变化 时 ， 这 些 变 更 立即 保存 到 Firebase 中 ， 并 且 泻 染 到 所 有 连接 的 设备 上 ， 如 图 18-20 所 示 。 





















































图 18-20 ”客户 端 应 用 程序 同步 


当 我 们 在 这 三 个 地 方 ( 视图 ， 模 型 或 者 Firebase ) 中 的 任意 一 个 里 更 新 数据 时 ， 变 更 会 实时 
传播 到 所 有 客户 端的 其 他 两 个 地 方 。 
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18.26 从 AngularFire 开始 


得 益 于 官方 的 Angular 库 ， 即 AngularFire ， 使 用 Firebase 和 Angular 创 建 实 时 Web 应 用 很 容易 。 
Firebase 团 队 专门 为 集成 Angular 应 用 创建 了 这 个 AngularFire 绑 定 ， 我 们 将 会 看 到 这 些 。 


使 用 AngularFire， 要 把 我 们 的 Angular 应 用 后 端 建立 到 Firebase 上 只 需 四 步 。 





18.26.1 注册 并 创建 一 个 Firebase 


在 能 够 真正 从 Firebase 中 保存 或 者 获取 任意 数据 之 前 ， 我 们 需要 一 个 账号 。 创 建 账号 是 免费 
的 ， 所 以 我 们 来 注册 一 下 ， 如 图 18-21 所 示 。 


目 Firebase ‘OVERVIEW GETTINGSTARTED PAICING Docs |[ loom | # souur rnse | 


Build Realtime Apps 


A powerful API| to store and sync data in realtime. 





图 18-21 注册 过 程 


首先 , 进入 firebase.com”, 然后 点 击 Sign up 按钮 (或 者 登录 , 如 果 有 账号 的 话 ), 如 图 18-22 所 示 。 


自 Firebase 
Create Your Free Account! 
Email Address 


| 


Create Password 





图 18-22 ”注册 过 程 


由 于 我 们 注册 了 一 个 账号 ， 第 一 个 Firebase 已 经 自动 为 我 们 创建 好 了 。 它 可 以 再 Firebase 面 板 
上 看 到 ， 如 图 18-23 所 示 。 


CD http://firebase.com 18 
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所 Dashboard 


MAASllelelnnl roll ek 


Your account At has been created successfully 
look at these resources to help you get started. 





图 18-23 ”注册 过 程 
我 们 所 选择 的 名 字 将 会 是 用 来 指向 Firebase 数 据 的 URL 的 一 部 分 。 例 如 ， 可 以 在 URL 
https://ng-newsletter.firebaseio.com 获 得 名 为 ng-newsletter 的 Firebase 数 据 。 


AngularFire 绑 定 让 我 们 把 一 个 Firebase URL 关 联 到 一 个 模型 , 或 者 模型 的 集合 。 这些 模 型 描述 
了 一 些 数据 ，AngularFire 会 透明 地 在 当前 所 有 使 用 我 们 应 用 的 客户 端 之 间 保 持 这 些 数据 的 同步 。 


Angular 的 双向 绑 定 保持 了 DOM 与 内 存 中 JavaScript 变 量 的 同步 , Firebase 保 存 了 这 些 变 更 , 并 
且 实时 把 它们 发 送 给 所 有 监听 的 客户 端 。 
































我 们 没有 改变 创建 Angular 应 用 的 方式 ， 就 获得 了 这 种 数据 同步 机 制 ， 太 酷 了 。 


18.26.2 包含 Firebase 和 AngularFire 库 


使 用 AngulaFire 也 是 很 容易 的 ， 只 需 将 两 个 JavaScript 文 件 包 含 到 我 们 的 HTML 文 件 中 : 一 个 


是 Firebase， 男 一 个 是 AngularFire。 


我 们 需要 使 用 Firebase 的 CDN， 所 以 在 index.html 的 顶部， 我 们 添加 下 面 两 行 代 码 : 





<script 
src="https://cdn.firebase.com/vO/firebase.js"> /script> 
<script 


src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.js"> 
</script> 


18.26.3 把 Firebase 作 为 依赖 项 添加 


像 平时 对 待 任何 应 用 库 一 样 ， 我 们 需要 把 Firebase 库 设置 为 模块 的 一 个 依赖 项 。 这 会 告诉 
用 的 其 他 部 分 ， 我 们 可 以 在 应 用 中 使 用 Firebase 绑 定 : 


angular .module("myapp", ["firebase"]); 


如 


18.26.4 绑 定 模型 到 Firebase URL 
通过 把 Firebase 定 义 为 依赖 项 的 方式 , 我 们 现在 可 以 获得 对 $firebase 服 务 的 访问 , 这 能 让 我 
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们 把 它 作 为 依赖 项 注入 到 控制 器 和 服务 中 。 


angular.module( 'myapp', ['firebase']) 
.controller("MyController", ["$scope", "$firebase", 
function($scope, $firebase) { 
// 把 控制 器 的 定义 写 在 这 里 
} 
] 3 


$firebase 服 务 带 有 一 个 参数 : Firebase 引 用 。 

FirebaseRef (Firebase 引 | 用 ) 

Firebase 引 用 告诉 $firebase 数 据 存在 哪里 ,如何 连 接 。$firebase 服 务 处 理 与 Angulat 的 同步 ， 
并 且 是 我 们 调用 方法 保存 变更 的 地 方 。 

这 个 对 象 有 多 个 方法 ， 我们 可 以 用 来 与 远程 数据 交互 。 这 些 方法 在 下 面 详细 列 出 ， 都 是 以 $ 
符号 开头 的 (例如 ，$add() 、$save() )， 都 可 以 在 这 个 对 象 上 使 用 。 


注意 ， 对 象 的 变更 不 会 引起 远程 数据 的 变更 。 


为 了 把 本 地 对 象 模型 同步 到 远程 的 Firebase 引 用 ， 我 们 使 用 服务 的 方法 ， 并 且 传 人 一 个 
Firebase 对 和 象 的 实例 。 例 如 ， 要 把 $scope. items 模 型 同步 到 我 们 的 ng-newsletter 项 ， 运 行 如 下 
方法 : 

angular.module( 'myApp' ) 

.controller("MyController", function($scope, $firebase) { 

// Firebase URL 

var URL = "https://ng-newsletter .firebase.com"; 

// 同步 $scope 上 的 items 

$scope.items = $firebase(new Firebase(URL + '/items')); 


}); 
至 此 ， 我 们 可 以 简单 地 跟 $scope.items 对 象 交 互 ， 这 样 可 以 同步 我 们 的 Angular 模 型 和 


Firebase。 





























18.26.5 ”数据 同步 
我 们 可 以 使 用 下 面 $firebase 对 象 提供 的 这 些 方法 来 把 数据 同步 到 Firebase。 
1. $add(value) 


$add 方 法 带 有 单个 任意 类 型 的 参数 。 它 把 这 个 值 添加 为 一 个 按照 时 间 排 序 的 列表 成 员 。 我 们 
可 以 把 这 个 看 作 是 在 Firebase 引 用 数组 上 调用 .push(value)。 





























注意 ，Firebase 引 用 对 象 并 不 真 的 是 个 数组 ， 但 是 可 以 把 它 当 成 像 数组 那样 用 。 
例如 ， 我 们 可 以 在 Firebase 引 用 的 /foo 端 点 上 添加 一 个 字符 串 “bar”: 
$scope.items.$add( {foo: "bar"}); 


2. $remove(key) 
$remove 方 法 从 Firebase 上 移 除 远程 的 子 引 用 。 它 带 有 单个 可 选 参数 。 
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key (可 选 ， 字 符 串 类 型 ) 如 果 我 们 提供 了 一 个 key 参 数 〈 作为 字符 串 )，$remove( ) 方 法 会 
移 除 这 个 key 指 向 的 子 对 象 。 如 果 没 有 提供 key ， 它 就 会 移 除 整个 远程 对 象 。 


$scope.items.$remove("foo"); // 移 除名 为 "foo" 的 子 对 象 
$scope.items.$remove(); // 移 除 整个 对 象 





3. $save(key) 

$save 方 法 使 用 Firebase 数 据 存 储 同步 本 地 元 素 上 的 所 有 变更 , 并 且 立 即 把 它们 推送 到 所 有 监 
听 的 客户 端 。 它 带 有 一 个 参数 。 

key(〈 可 选 ， 字 符 串 类 型 ) 如 果 我 们 提供 了 key 参 数 (字符 串 )，$save 方 法 会 把 对 key 指 向 的 
子 元 素 的 变更 保存 到 Firebase。 如 果 没 有 给 $save( ) 方 法 提供 key， 所 有 对 这 个 对 象 的 本 地 变更 都 
会 保存 到 Firebase。 


$save() 方 法 最 常用 于 保存 本 地 变更 的 模型 。 











$scope.items .foo = "baz"; 
$scope.items.$save("foo"); // 新 的 Firebase(URL + "/foo") 现 在 包含 了 "baz" 


4. $child(key) 
WI 给 定 key 指 向 的 子 对 象 创建 了 一 个 新 的 $firebase 对 象 。 这 个 方法 带 有 单个 
key (字符 串 类 型 ) key 字 符 串 被 用 于 指向 新 创建 的 子 对 象 。 

var child = $scope.items.$child("foo"); 

// 等 同 于 调用 


// $scope.items.$remove("foo"); 
child.$remove( ); 








Wp 


5. $set (value) 


$set( ) 方 法 把 这 个 对 象 的 远程 值 覆盖 为 新 值 .$set( ) 方 法 也 会 将 本 地 对 象 的 版 本 更 新 为 这 
个 值 。 


它 带 有 一 个 参数 ; 
value ( 对 象 类 型 ) value 人 参数 是 本 地 对 象 的 新 值 。value 履 盖 了 旧 值 ,随后 更 新 到 这 个 新 值 。 


$scope.items.$set({bar: "baz"}); // 新 的 Firebase(URL + "/foo") 现 在 是 nul1 























18.27 在 AngularFire 中 排序 


如 果 我 们 想 要 对 远程 对 象 排 序 , 可 以 在 调用 $save( ) 之 前 设置 一 个 记录 上 的 $priority 字 段 ， 
而 不 是 简单 地 在 本 地 用 Angular 的 orderBy 过 滤器 排序 。 


$scope.items. foo.$priority = 2; 
$scope.items.$save("foo"); // 新 的 Firebase(URL + "foo") 的 优先 级 现在 是 2 


$firebase 服 务 默认 返回 一 个 简单 的 JavaScript 对 象 。 我 们 可 以 把 这 个 对 象 转换 为 一 个 数组 ， 
ee 寸 滤 需 来 排序 。 


过 滤 需 把 $firebase 服 务 返 回 的 对 象 转换 成 一 个 数组 ， 根 据 Firebase 定 义 的 优先 级 来 排 
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序 。AngularFire 会 在 每 个 对 象 上 设置 一 个 $id 属 性 ， 它 引用 了 对 象 的 keyname。 





<ul ng-repeat="item in items | orderByPriority"> 
<1i> 
<input type="text" id="{{item.$id}}" ng-model="item.$priority"/> 
{{item.name}} 
< li 
</ul> 


18.28 ”Firebase 事件 


Firebase 触 发 两 类 事件 ， 我们 可 以 在 应 用 内 用 这 两 类 事件 来 处 理 自 定义 逻辑 。 我 们 可 以 使 用 
$on( ) 方 法 来 给 这 两 种 事件 类 型 添加 事件 处 理 程序 。 


1. loaded 
当 从 Firebase 收 到 初始 数据 ， 从 一 个 连接 初始 化 的 时 候 ，Firebase 触 发 1oaded 事 件 。 它 会 旦 只 
会 被 触发 一 次 。 


$scope.items.$on('loaded', function() { 
console.1og("Items loaded"); 


下 





2. change 


每 当 有 一 个 远程 的 变化 数据 应 用 于 本 地 对 象 时 ，Firebase 都 会 触发 change 事 件 。 例 如 ， 如 果 
有 另外 一 个 用 户 往 我 们 的 任务 列表 里 加 了 个 新 任务 ， 它 就 会 触发 ， 如 下 所 示 : 
$scope.items.$on('change', function() { 


console.1og("A change is afoot"); 


}); 





18.29 ” 显 式 同步 


要 给 一 个 $scope 变 量 添加 自动 化 的 显 式 同步 机 制 ， 可 以 调用 $firebase 服 务 返 回 对 象 的 
$bind() 方 法 。 

$bind() 方 法 自动 建立 了 一 个 三 向 绑 定 ， 所 以 我 们 不 用 显 式 使 用 $add( ) 或 者 $save 方 法 在 
Firebase 上 保存 数据 。 


$scope.items.$bind($scope, "remoteItems'" ) ; 
$scope .remoteItems .bar = "foo"; // 新 的 Firebase(URL + "/bar") 现 在 是 "foo" 


$bind( ) 方 法 返回 了 一 个 promise， 它 会 从 收 到 服务 需 的 初始 数据 之 后 执行 。 这 个 promise 会 被 
用 一 个 unbind 方 法 执行 ，unbind 在 调用 时 可 以 解除 三 向 绑 定 。 








$scope.items.$bind($scope, "remote") 
.then(function(unbind) { 
unbind(); 

// 远程 数据 

// 没有 产生 变更 

$scope .remote.bar = "foo"; 


] ) ; 
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$bind( ) 方 法 返回 了 一 个 promise， 它 会 在 AngularFire 从 收 到 服务 器 的 初始 数据 之 后 执行 。 这 
个 promise 会 被 用 一 个 unbind 方 法 执行 ，unbind 在 被 调用 时 ， 可 以 解除 三 向 绑 定 。 这 个 关联 的 解 
除 对 于 优化 网 站 和 移 除 不 必要 的 监控 是 很 有 帮助 的 。 








18.30 用 AngularFire 进行 认证 


Firebase 提 供 了 一 个 简单 的 开 箱 即 用 的 客户 端 认 证 策略 。 

使 用 Firebase 的 Simple Login 或 者 Custom Login 方 法 ， 我 们 可 以 轻松 地 用 AngularFire 给 应 用 添 
加 用 户 认 证 。 

如 果 我 们 有 自己 的 服务 器 ， 想 要 控制 自己 的 认证 过 程 ， 或 者 我 们 想 把 自己 的 认证 过 程 跟 
Firebase 集 成 ，Custom Login 是 最 适合 用 的 。 

如 果 我 们 想 用 Firebase 来 管理 我 们 所 有 的 认证 ， 可 以 使 用 Simple Login ， 它 支持 Facebook、 
Twitter 、Github、Persona 和 Email/Password 认 证 。 
通过 在 应 用 模块 中 定义 Firebase 为 依赖 项 的 方式 ， 我 们 在 控制 器 和 服务 中 获得 了 对 
$firebaseAuth 服 务 的 访问 权 。 









































angular .module(l 'myApp ') 

.Controller("MyAuthController"，function($scope，$firebaseAuth) { 

0 

$firebaseAuth 服 务 方法 带 有 两 个 参数 : 一 个 Firebase 引 用 和 一 个 可 选 的 选项 对 象 。 为 了 能 自 
定义 使 用 Firebase 进 行 认证 的 方式 ， 这 个 对 象 可 以 包含 如 下 属性 。 

口 path: 如 果 authRequired 属 性 在 $routeProvider 中 被 设置 成 true, 用 户 又 没有 登录 的 话 ， 

用 户 会 被 重 定向 到 path 属 性 指向 的 地 址 。 

口 simple: $firebaseAuth 默 认 需 要 包含 firebase-simple-login.js 文 件 , 如 果 simple 的 值 被 设 
置 为 false ， 就 没 这 个 要 求 了 ,但 只 有 自 定义 登录 功能 会 被 启用 ， 我 们 不 能 使 用 简单 认 
证 了 。 

口 callback: 当 认 证 状态 发 生变 化 的 时 候 ，Firebase 会 调用 这 个 函数 。 我 们 可 以 把 这 个 回调 
作为 在 $rootScope 上 触发 的 事件 的 替代 ， 这 是 处 理 认证 状态 变更 的 推荐 方式 。 















































angular.module('myApp ' ) 
.Controller("MyAuthController"，function($scope，$firebaseAuth) { 
var ref = new Firebase(URL ) ; 
$scope.auth = $firebaseAuth(ref); 
// $scope.auth.user 在 用 户 登 录 之 前 都 是 null 
}); 


$firebaseAuth( ) 方 法 返回 的 对 象 包含 一 个 叫做 user 的 属性 。 如 果 用 户 注 销 了 ，user 就 被 
设置 为 nul1,， 一 旦 他 登录 了 ，user 变 成 包含 用 户 详情 的 一 个 对 象 。 我 们 会 在 下 面 探讨 登录 的 
检测 。 





用 户 详情 对 象 的 内 容 会 随 着 所 使 用 认证 方式 的 不 同 而 有 所 区 别 ， 但 至 少 , 它 会 有 一 


个 user id 和 provieder name。 
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18.31 认证 事件 


使 用 AngularFire 认 证 ,我们 能 够 使 用 多 个 可 改变 用 户 认证 状态 的 方法 ,这 些 方法 是 $login()、 
$logout( ) 和 $createUser( )。 

在 AngularFire 中 ， 认 证 状态 被 认为 是 全 局 状态 ， 下 面 的 每 个 认证 方法 都 会 被 在 $rootScope 
上 上 广播。 既然 几 乎 所 有 作用 域 都 是 从 $rootScope 继 承 的 ， 我 们 可 以 从 任意 控制 器 调用 


$scope.on(...)。 























全 局 认证 意味 着 不 会 有 多 个 用 户 同时 登录 到 应 用 的 同一 个 实例 。 例 如 ,全 局 认证 阻 
止 了 两 个 用 户 在 同一 个 浏览 器 实例 中 同时 登录 到 Gmail。 
$firebaseAuth:login 用 户 成 功 登陆 时 会 触发 这 个 事件 。 它 会 用 两 个 参数 来 触发 : event 
和 user 对 象 。 
$rootScope.$on("$firebaseAuth:login", function(evt, user) { 


console.log("User " + user.id + " successfully logged in!"); 


}); 


$firebaseAuth:1ogout 用 户 注 销 时 触发 这 个 logout 事 件 。 这 个 事件 使 用 一 个 event 参 数 来 
触发 。 


$rootScope.$on("$firebaseAuth:1logout"，function(ev 七 ) { 
console.1og("User logged out!"); 
}); 
$firebaseAuth:error 当 调 用 $1ogin( ) 或 者 $1o0gout( ) 的 过 程 中 产生 错误 时 ，error 事 件 
会 触发 。 这 个 事件 使 用 一 个 error 参 数 来 触发 。 


$login(token，[options]) 我 们 使 用 $login( ) 方 法 来 登录 一 个 用 户 。 通 常 在 用 户 点 击 登 
录 按 钮 时 使 用 它 ， 如 下 所 示 : 








<a href="#" 
ng-hide="auth.user" 
ng-click="auth.$login('persona' )">Login</a> 


$login( ) 函数 最 多 可 带 两 个 参数 : 


tokenOrProvider (string/JWT token) 如果 我 们 正在 使 用 Firebase Simple Login， 可 以 简 
单 地 传人 一 个 提供 者 名 称 ， 比 如 facebook 或 者 persona。 如 果 我 们 想 用 使 用 Custom Login 流 程 ， 就 
需要 传人 一 个 合法 的 JWT 令 牌 了 。 


options (object) 我 们 只 在 使 用 Simple Login 时 用 到 这 个 options 参 数 ， 提 供 的 这 个 
options 会 不 经 修改 地 传递 给 Simple Login 方 法 。 


对 于 password 提 供 者 来 说 ， 我 们 会 需要 把 username 和 password 作 为 对 象 提供 。 


更 多 关于 user 对 象 的 信息 ， 参 阅 AngularFire.com" 的 Firebase 文 档 。 


























GD http://angularfire.com/ 
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18.31.1 $logout() 
$logout() 方 法 注销 当前 用 户 ， 不 带 参 数 
$firebaseAuth: logout 事 件 会 在 注销 结束 之 后 触发 ， 将 user 属 性 设置 为 null 。 我 们 一 般 会 
把 这 个 方法 添加 在 注销 按钮 上 
<Span ng-show="auth.user"> 
{{auth.user.name}} | «<a href="#" ng-click="auth.$logout()">Logout/ay> 
</span> 
者 时 ，$createUser( ) 很 有 用 


18.31.2 $createUser() 
当 我 们 使 用 Firebase Simple Login 的 “password” 提 人 


$createUser( ) 方 法 带 三 个 参数 
有 email 来 创建 用 户 


我 们 要 月 
个 callback 方 法 。 





调用 这 





password (string) 我 们 要 用 password 来 创建 用 户 
Firebase 在 $createUser( ) 运 行 完 之 后 ， 
带 有 两 个 参数 : error 和 user。 如 果 在 $createUser( ) 方 法 中 产生 了 错误 ,error 就 会 包含 a 


email (string) 
callback (function) 
个 参数 : 
USeT 就 Enul1l。 如 果 error 是 nul 1 那 user 就 会 被 定义 
password, function(error, user) { 
+ User.id + ', Email: + User .email) 
立 一 个 服务 器 或 者 写 


自 
需 担心 要 建立 
这 能 立即 在 应 用 的 模型 和 


Lo 9 
auth.createUser(email 
if (lerror) { 

console.log('User Id 


这 些 应 用 





} 
应 用 接 通 一 个 后 端 变 得 很 容易 ， 无 
杂 、 实 时 的 应 用 ， 



































} 3 
Firebase 使 我 们 的 Angular 应 
一 行 后 端 代 码 。AngularFire 使 得 我 们 能 创建 复杂 
Firebase 中 存储 的 数据 之 间 同 步 。 
要 对 AngularFire 了 解 更 多 ， 源 码 可 以 在 Github 上 找到 。 
想 在 几 分 钟 内 把 一 个 AngularFire 应 用 运行 起 来 ， 那 就 将 angularFire-seed 仓库 复制 一 下 。 
管 它 不 是 很 

















18.32 ”使 用 Firebase 托管 部 署 你 的 Angular 应 用 
现在 已 经 有 一 个 正在 工作 的 Angular 应 用 了 ， 如 果 有 一 种 很 简单 的 方式 部 署 和 托 
好 吗 ? Firebase 有 一 个 叫做 Firebase 托 管 的 服务 它 允 许 你 使 用 安全 的 SSL 连 接 和 CDN 服 务 托管 表 

设置 托管 ”链接 。 通 过 3 步 即 可 让 你 的 应 用 











态 内 容 。 为 了 开始 托管 ， 在 你 的 Firebase 面 板 上 点 击 
运行 在 你 自己 的 firebaseapp.com 上 | 


安装 Firebase 工 具 
要 安装 Firebase 命 令 行 工具 ， 简 单 地 运行 hpm install -g firebase-tools 命 令 即 可 。 注 意 ， 





18.32.1 
享 尊重 版 权 








QD https://github.com/firebase/angularFire-seed 
鸟 月 月 (dearzpfree@hotmail.com) 专 
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你 需要 先 安装 Node 后 才能 使 用 这 个 命令 。 


18.32.2 ”部 署 你 的 Web 站 点 


在 命令 行 中 ,使 用 cd 命令 进入 应 用 目录 ， 运 行 firebase init 命 令 初始 化 你 的 应 用 。 然 后 运 
行 firebase deploy 命 令 。 现 在 你 的 应 用 就 运行 了 ! 在 Firebase 面 板 中 ,你 可 以 点 击 回 深 到 之 前 的 
部 署 。 

使 用 Firebase 的 Hacker Paln， 可 以 将 应 用 部 署 到 firebaseapp.com 上。 如 果 你 想 部 署 到 你 自己 的 
自 定义 域 中 ， 可 以 使 用 Firebase 的 付费 方案 做 到 这 一 点 。 








18.33 除了 AngularFire 之 外 


AngularFire 是 用 于 跟 Firebase 交 互 的 一 个 很 好 的 封装 器 ， 但 是 要 从 Angular 做 更 复杂 的 操作 ， 
当然 也 可 以 直接 用 Firebase SDK。 要 了 解 更 多 关于 这 个 复杂 的 实时 平台 的 高 级 功能 ， 请 参阅 
Firebase 教 程 "。 


























(Wh https://www.firebase.com/tutorial/ 
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测试 

















Angular 框 架 鼓 励 编写 干净 、 可 靠 、 可 测试 的 代码 。 这 是 Angular 带 来 的 最 有 价值 的 特性 之 一 。 


Angular 团 队 非 常 强调 测试 的 重要 性 ， 他 们 创建 了 一 个 测试 运行 器 来 让 这 个 过 程 更 简单 。 他 
们 表示 : 





OO JavaScript 是 一 种 动态 语言 ， 有 强大 的 表达 能 力 ， 但 带 来 的 问题 是 : 从 编辑 器 那 
边 得 不 到 什么 帮助 。 因 为 这 个 原因 ， 我 们 强烈 感觉 到 : 任何 使 用 JavaScript 编 写 
的 代码 都 应 当 有 强大 的 测试 集 。 我 们 已 经 在 Angular 里 面 加 了 不 少 特性 ， 能 让 测 
试 Angular 应 用 非常 容易 。 所 以 没有 理由 不 做 测试 。 


19.1 为 什么 要 做 测试 
不 管 是 为 了 何 种 商业 目的 ， 对 代码 的 信心 是 很 重要 的 。 当 代码 库 有 了 测试 的 支撑 ， 就 可 以 了 
解 我 们 代码 的 各 部 分 是 否 按 预期 工作 。 


代码 中 的 bug 是 不 可 避免 的 ， 没 有 测试 ， 很 难 知道 它们 藏 在 哪里 ; 测试 能 够 分 离 和 消除 这 些 
缺陷 。 这 可 以 让 其 他 开发 人 员 容 易 上 手 ， 并 且 提 供 代码 的 可 用 文档 。 


如 果 我 们 想 要 了 解 在 应 用 中 发 生 了 什么 事情 ， 测 试 是 至 关 重 要 的 。 



































19.2 ”测试 策略 


在 开发 Angular 应 用 的 测试 套件 时 ， 对 于 如 何在 应 用 中 测试 、 要 测试 什么 ， 能 够 有 所 规划 ， 
总 是 好 事 。 如 果 最 终 没 有 验证 过 实际 的 东西 ， 写 着 毫 无 意义 的 测试 , 我 们 对 于 应 用 是 否 能 正常 运 
行 不 会 有 信心 。 相 反 ， 如 果 能 测试 所 想到 的 一 切 ， 最 终 ， 我 们 花 在 编写 测试 和 找 出 测试 代码 中 微 
小 bug 的 时 间 ， 比 花 在 应 用 上 的 时 间 要 多 。 

能 从 所 编写 的 测试 中 得 到 什么 价值 ， 和 需要 测试 什么 ， 对 此 务实 一 些 很 重要 。 


最 终 ， 测试 既是 一 种 衡量 我 们 应 用 健康 度 的 工具 ， 也 是 一 种 度量 ， 当 引入 新 功能 的 时 候 ， 它 
能 告诉 我 们 代码 是 否 出 问题 了 。 






































19.3 ”开始 测试 
在 开始 测试 之 前 ， 一 个 最 大 障碍 是 要 建立 一 个 测试 的 运行 器 来 运行 我 们 代码 的 测试 。 
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JavaScript 代 码 的 测试 也 是 有 些 困难 的 ， 因 为 这 要 求 我 们 把 自动 化 功能 放 在 浏览 器 里 。 


构建 一 个 开发 测试 套件 已 经 够 困难 了 , 想 要 支持 持续 集成 会 怎样 呢 ?” 这 样 我 们 新 部 署 的 代码 
可 以 被 自动 测试 ， 也 可 以 在 创建 新 版 本 之 前 对 代码 质量 有 信心 。 


在 软件 工程 中 , 持续 集成 是 这 样 的 实践 : 一 天 内 多 次 合并 共享 同一 主线 的 开发 工作 
的 副本 ， 并 且 在 更 新 的 基础 上 运行 测试 套件 。 


Karma 是 一 个 测试 工具 ， 它 从 头 开始 构建 ， 免 去 了 设置 测试 方面 的 负担 ， 这 样 我 们 就 可 以 
将 主要 精力 放 在 构建 核心 应 用 逻辑 上 。 


Karma 产 后 一 个 浏览 器 实 例 (或 者 多 个 不 同 的 浏览 器 实例 )， 针 对 不 同 的 浏览 器 实例 运行 测 
试 ,检测 在 不 同 浏览 器 环境 下 测试 是 否 通过 .Karma 与 浏览 器 通过 socket . io 来 联系 ,这 能 让 Karma 
保持 持续 通信 。 因 此 Karma 提 供 了 关于 哪些 测试 正在 运行 的 实时 反馈 ， 提 供 一 份 适合 人 类 阅读 的 
输出 ， 告 诉 我 们 哪些 测试 通过 、 哪 些 失败 或 者 超时 。 

Karma 可 以 原生 地 与 多 个 不 同 浏 览 器 通信 ， 消 除了 手工 在 多 个 浏览 需 上 测试 代码 的 需要 。 比 


如 说 ， 它 可 以 在 Chrome、IE、FireFox 上 运行 测试 ， 把 结果 分 别 输出 到 控制 台 。 我 们 甚至 可 以 连 
接 到 自己 的 本 地 设备 (是 的 ， 比 如 iPhone 或 者 iPad ) 来 测试 代码 。 






























































19.4 AngularJS 测试 的 类 型 


要 测试 我 们 的 Angular 应 用 ， 有 好 几 种 不 同 的 方式 ， 取 决 于 我 们 想 关 注 什么 级 别 的 粒度 ， 想 
要 完成 什么 功能 。 


19.4.1 单元 测试 
我 们 可 以 专注 于 构建 我 们 的 测试 来 隔离 具体 .单独 组 件 的 代码 。 这 种 方法 被 称 为 “单元 测试 ”， 
在 不 同 阶段 、 不 同 条 件 下 、 以 不 同 的 输入 来 测试 各 种 特定 单元 的 代码 。 


单元 测试 专门 用 于 测试 小 型 、 独 立 的 代码 单元 ， 单 个 函数 ， 或 者 较 小 的 带 有 功能 的 交互 。 它 
不 是 用 来 测试 大 功能 集 的 。 


单元 测试 的 麻烦 在 于 把 逻辑 隔离 成 小 块 , 这 样 我 们 才能 测试 它 。 本 章 的 后 面部 分 会 讨论 实现 
隔离 的 策略 。 


何 时 选择 单元 测试 
当 编 写 功能 代码 的 时 候 , 我 们 将 会 创建 小 的 功能 组 件 。 例如 ,在 构建 一 个 应 用 用 于 实时 过 滤 
列表 中 元 素 时 ， 会 构建 一 个 过 滤 融 功能 。 
这 个 过 滤器 的 功能 是 一 个 功能 单元 , 当 我 们 需要 使 用 单元 测试 进行 测试 时 , 它 是 理想 的 选择 。 
要 确保 这 个 功能 已 经 实现 ， 按 照 预期 工作 ， 我 们 需要 隔离 这 个 组 件 ， 并 且 用 不 同 的 输入 来 测试 。 
设想 我 们 正在 构建 一 稻 火 箭 飞 船 。 我 们 想 要 测试 每 艘 飞船 的 一 部 分 ( 例如 推进 器 、 
操纵 杆 控制 、 供 氧 系统 ) 来 验证 飞船 通常 是 按照 我 们 期 望 的 那样 工作 的 。 









































GD http://karma-runner.github.io/0.10/index.html 
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19.4.2” 端 到 端 测 试 


男 一 方面 ， 也 可 以 对 我 们 的 应 用 作 黑 使 测试 ( 也 就 是 端 到 端 测试 )。 在 端 到 端 ( E2E ) 测试 
中 ,我 们 测试 应 用 的 视角 是 : 作为 最 终 用 户 ， 对 系统 的 底层 实现 一 无 所 知 。 这 种 方法 非常 适合 测 
试 大 型 应 用 的 功能 。 


端 到 端 测试 适合 测试 页 面 上 的 用 户 交互 ， 无 需 手 动 刷新 页 面 。 

关于 这 类 测试 的 介绍 并 不 新 鲜 ， 还 有 些 了 不 起 的 工具 ， 能 使 我 们 建立 自动 化 的 浏览 器 测试 。 
我 们 可 以 使 用 工具 如 PhantomJS 或 CasperJS 来 进行 无 头 浏览 器 测试 ( 即 不 必 打 开 浏览 器 ), 或 Karma 
等 工具 ， 会 真正 将 打开 一 个 浏览 器 并 在 一 个 iftame 中 执行 所 有 的 测试 。 

何 时 选择 端 到 端 测试 

当 我 们 编写 用 例 功 能 的 测试 时 , 顺 着 用 户 的 思路 去 写 测试 总 是 不 错 的 。 端 到 端 测试 意义 重大 ， 
因为 它 映射 了 用 户 在 使 用 我 们 应 用 时 的 真实 体验 。 

例如 ， 当 建立 一 个 用 户 登 录 流 程 时 , 我 们 要 测试 用 户 登 录 进 来 并 且 重 定向 到 了 他 的 主页 。 我 
们 并 不 关心 用 户 是 怎样 登录 进来 的 ， 我 们 只 关心 他 们 登 进 来 ， 然 后 跳 转 到 恰当 的 位 置 。 

想象 一 下 你 正在 构建 一 个 火箭 船 。 端 到 端 测试 不 在 乎 发 动机 或 起 落架 ， 它 只 关心 火 
箭 起 飞 ， 把 你 的 宇航 员 送 上 太空 。 
Karma 测 试 运行 器 同时 支持 单元 测试 和 端 到 端 测试 。 












































| 注意 ， 编 写 单元 测试 而 不 是 端 到 端 测试 将 使 我 们 的 测试 速度 飞快 。 把 测试 设置 
成 同步 执行 ， 使 用 模拟 库 ， 也 将 大 大 加 速 我 们 的 测试 。 


19.5 开始 


要 运行 我 们 的 测试 , 需要 安装 Karma 测 试 运行 器 。 读 到 这 的 时 候 , 你 应 该 已 经 装 了 NodeJS "和 
npm 了 吧 ， 要 是 还 没有 ， 快 去 装 吧 。 安 装 好 之 后 ， 我 们 就 可 以 用 npm 命 令 来 安装 Karma 了 : 





$ npm install -g karma 


我 们 将 把 依赖 关系 保存 在 package.json 文 件 中 。 如 果 要 在 npm 已 安装 的 情况 下 设 
置 package.json， 直 接 运行 npm in 让 ， 跟 着 向 导 走 一 遍 就 行 了 。 











要 开始 测试 我 们 的 应 用 ， 需 要 为 应 用 代码 和 测试 代码 设置 一 个 合理 的 结构 。 
推荐 用 下 面 的 格式 存储 应 用 的 文件 : 


app/ 
index.html 
js/ 
app.js 
controllers.js 





GD http://nodejs.org 
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directives.js 
services.js 
filters.js 
views/ 
home.html 
dashboard.html 
calendar.html 
test/ 
karma-e2e.conf.js 
karma.conf.js 
lib/ 
angular-mocks .js 
helpers.js 
unit/ 
e2e/ 


app/ 的 布局 是 标准 的 ， 应 用 代码 划分 之 后 存储 在 里 面 。testV 目 录 中 舱 套 存放 了 测试 ， 放 置 在 
对 应 的 目录 中 ， 目 录 名 称 反映 了 测试 的 类 型 : unit/ 或 者 e2e/。 





当前 版 本 Angular 的 文件 类 型 最 佳 结构 尚 有 争议 ， 这 是 一 种 推荐 的 测试 文件 结构 
的 布局 口 


在 test 目 录 中 ， 有 两 个 不 同类 型 的 Karma 配 置 文件 。 每 个 文件 都 包含 了 将 要 运行 的 具体 测试 
类 型 。 随 着 对 每 种 测试 类 型 的 和 遍历， 我们 会 讨论 每 种 Karma 配 置 文件 应 该 长 什么 样 ， 以 及 如 何 为 
我 们 的 用 途 来 定制 它 。 


运行 一 个 Karma 测 试 挺 容易 的 : karma start path/to/karma.config.js。 当 测试 运行 器 启 
动 的 时 候 ， 它 会 把 在 Karma 配 置 文件 中 列 出 的 浏览 器 启 动 起 来 ， 如 图 19-1 所 示 。 





Ge mao 1 

















图 19-1 用 Chrome 和 Safari 运 行 Karma 


默认 情况 下 ， 如 果 不 是 另 有 规定 ，Karma 将 监控 配置 文件 中 列 出 的 所 有 文件 。 任 何 时 候 有 文 
件 产 生 了 变化 ，Karma 都 将 运行 适当 的 测试 。 











19.6 ”初始 化 Karma 配置 文件 


Karma 给 了 我 们 一 个 生成 器 来 创建 配置 文件 。 这 个 生成 器 会 问 几 个 关于 要 怎样 建立 配置 文件 
的 问题 ， 每 个 问题 建议 了 一 个 默认 值 ， 可 以 简单 地 接受 所 有 默认 值 ， 过 一 会 我 们 就 来 这 么 做 ， 如 




















图 灵 社 区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 








224 第 19 章 测试 





19-2 所 示 。 





图 19-2 ”Karma 初 始 化 


设置 用 单元 测试 和 端 到 端 测试 来 做 测试 的 过 程 大 体 相 同 。 我 们 会 使 用 karma init 生 成 器 来 
创建 karma.confjs 配 置 文件 。 
1. 建立 单元 测试 


首先 ， 让 我 们 在 测试 文件 的 路 径 运行 karma _ init 命令 ， 在 本 例 中 ,我 们 在 tests 目 录 中 创建 
Karma 配 置 文件 : 














$ karma init test/karma.conf.js 
对 于 单元 测试 而 言 ， 运 行 测试 所 需 的 依赖 项 都 要 具备 。 当 使 用 Karma 生 成 器 来 构建 单元 测试 
时 ， 单 元 测试 包含 下 列 这 些 代 码 的 引用 是 很 重要 的 : 
口 一 个 测试 框架 ( 选 一 个 ) 
和 Jasmine ( 默认 ) 
@ Mocha 
m QUnit 
口 自 定义 的 配置 文件 (需要 w/Mocha ) 
口 所 需 的 第 三 方 代码 
口 应 用 特有 的 代码 
口 测试 代码 
口 模拟 用 的 angular-mock.js 库 
单元 测试 需要 引用 待 测试 应 用 的 所 有 代码 ， 也 要 引用 所 有 要 写 的 测试 代码 。 


例如 ， 一 个 示例 单元 测试 的 Karma 配 置 文件 可 能 看 起 来 像 下 面 这 样 (为 了 简单 起 见 ， 去 掉 了 
注释 )， 






































module.exports = function(config) { 
config.set({ 
basePath: ' 
frameworks: ['jasmine'] 
files: [ 
"lib/angular.js', 
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'lib/angular-route.js', 
'test/lib/angular-mocks.js', 
'js/™/*.js', 
‘test/unit/™/*.js' 

]> 

exclude: [], 

port: 8080 ， 

logLevel: config.LOG_INFO ， 

autoWatch: true, 

browsers: ['Safari'], 

singleRun: false 


} 5 





}; 
这 个 配置 文件 类 似 于 我 们 会 生成 出 来 的 那样 。 
设置 了 这 个 文件 之 后 ， 就 能 像 下 面 这 样 运 行 单 元 测试 了 : 








$ karma run test/karma.conf.js 

另外 ， 如 果 想 在 每 次 代码 有 变化 时 运行 单元 测试 ( 如 果 把 autoWatch 设 置 成 了 true )， 可 以 
像 下 面 这 样 : 

$ karma start test/karma.conf.js 

2. 建立 端 到 端 测试 

要 设置 端 到 端 测 试 ， 要 使 用 端 到 端 测试 Karma 配 置 文件 的 路 径 来 运行 Karma 生 成 器 。 

$ karma init test/karma-e2e.conf.js 


端 到 端 测试 要 使 用 ng-scenario 框 架 。 不 像 单 元 测试 那样 ， 我 们 不 需要 引用 所 有 的 库 代 码 : 
端 到 端 测试 是 跑 在 服务 咒 上 的 ，ng-scenario 框 架 只 需要 在 浏览 需 中 加 载 所 有 这 些 测 试 就 可 以 了 。 





端 到 端 测试 的 示例 Karma 配 置 文件 可 能 长 这 样 : 


module .exports = function(config) { 
config.set({ 
basePath: '..', 
frameworks: ['ng-scenario '] ， 
files: [ 
‘test/e2e/™*/*.js' 
], 
exclude: [], 
port: 8080 ， 
logLevel: config.LOG_INFO ， 
autoWatch: false, 
browsers: ['Chrome'], 
singleRun: false, 
urlRoot: '/_karma_/', 
proxies: { 
'/': 'http://1localhost:9000/" 


2 
] 


设置 好 这 个 配置 后 ， 就 可 以 这 样 运行 端 到 端 测 试 : 





$ karma run test/karma-e2e.conf.js 
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另外 ， 如 果 想 要 在 每 次 代码 有 变化 时 运行 我 们 的 测试 《如 果 把 autowatch 设 置 成 了 true )， 
可 以 像 下 面 这 样 : 


$ karma start test/karma-e2e.conf.js 





19.7 配置 选项 
基于 Karma， 可 以 在 多 种 配置 选项 之 间 选 择 ， 定 制 自己 喜欢 的 测试 方式 。 
1. 框架 


生成 器 会 问 我 们 使 用 哪个 测试 框架 来 做 测试 。Jasmine 是 默认 的 测试 框架 ， 不 过 ， 生 成 器 默 
认 也 支持 Mocha 、QUnit 和 其 他 测试 框架 。 


这 些 测试 框架 都 需要 安装 额外 的 npm 库 。 例 如 ， 要 使 用 Jasmine 框 架 ， 需 要 安装 Jasmine 插 件 。 











[RH 





$ npm install --save-dev karma-jasmine 


使 用 --save-dev 标 志 会 把 依赖 关系 写 到 package.json 文 件 中 ， 放 在 devDependencies 
下 面 。 


在 配置 文件 里 ， 这 个 标志 使 用 了 一 个 数组 ， 可 以 让 我 们 使 用 多 个 框架 。 一 般 我 们 只 用 一 个 ， 
所 以 通常 这 个 选项 会 被 设置 成 [' jasmine'] 或 者 ['mocha']。 


比如 : 





frameworks: ['jasmine'], 
2. RequireJS 


如 果 这 个 项 目 使 用 了 RequireJS" 库 , 询问 是 否 要 包含 RequireJS 的 ， 就 要 回答 yes。 如 果 项 目 没 
有 包含 它 ， 不 是 把 项 目 中 所 有 文件 都 列 在 Karma 配 置 文件 中 (马上 就 会 看 到 )， 而 是 要 包含 单独 
的 测试 文件 ， 它 负责 加 载 特定 模块 。 


RequireJS 是 专门 为 浏览 器 设计 的 JavaScript 文 件 和 模块 加 载 器 。 利 用 它 我 们 能 编写 JavaScript 
库 ， 这 些 库 能 够 导出 一 个 库 并 使 用 模块 名 来 配置 依赖 的 预期 ， 它 将 在 我 们 模块 加 载 的 时 候 可 用 。 
它 的 主要 好 处 是 : 
口 建立 了 一 个 导入 过 程 ; 
口 能 加 载 般 套 的 依赖 项 ; 
口 让 打包 依赖 项 变 得 容易 。 
实际 上 ，RequireJS 人 允许 我 们 通过 模块 来 定义 JavaScript， 以 及 在 JavaScript 中 请 求 这 些 模块 。 
例如 : 















































define(['jquery', 'underscopre'], 
function($, _) { 
// $ 引用 jQuery 





GD http:/requirejs.org 
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// _ 引用 underscore 


}); 

有 关 如 何 设置 测试 的 更 多 信息 ， 参 见 RequireJS 。 

3. 浏览 器 捕获 

Karma 生 成 需 会 询问 要 自动 启动 哪个 浏览 器 来 捕获 测试 结果 。 终 止 测试 运行 器 时 ，Karma 也 , 
会 把 这 些 浏览 器 关 掉 。 我 们 也 可 以 用 浏览 器 打开 Karma Web 服 务 右 监听 的 URL ( 默认 为 
http://localhost:9876 ) 来 测试 ， 如 果 要 从 本 地 网 络 的 另 一 台 机 需 (或 者 虚拟 机 ) 的 下 来 测试 的 话 ， 
这 一 点 值得 牢记 。 

要 使 用 Karma 来 启动 和 运行 ， 每 个 浏览 器 都 需要 安装 额外 的 插件 。 我 们 可 以 使 用 npm 来 安装 
这 些 搬 件 。 例 如， 为 了 让 Karma 控 制 Chrome ， 我 们 就 要 安装 Chrome 启 动 插件 。 





























$ npm install ~--save-dev karma-chrome-launcher 

如 果 要 使 用 Safari， 就 要 安装 Safari 启 动 插 件 ， 对 于 Firefox， 就 要 安装 Firefox 启 动 插 件 ， 其 他 
类 同 。 

browsers: ['Chrome', 'Safari'], 

4. 源 文件 和 测试 文件 

Karma 生 成 器 会 询问 JavaScript 源 文件 和 测试 文件 存放 在 哪里 , 这 个 数组 可 以 包含 简单 的 字符 
串 和 对 象 。 

字符 串 可 以 是 模式 ( 例如 app/js/**/*.js ), 或 者 文件 地 址 ( 例如 app/js/main.js )， 这 些 文件 和 模 
式 都 是 相对 于 basePath 的 。 

我 们 也 可 以 用 一 个 对 象 〈 而 不 是 字符 串 ) 来 指定 文件 ,要 配置 一 个 给 定 的 文件 路 径 或 者 模式 
的 某 些 方面 时 ， 这 是 比较 有 用 的 ， 在 下 面 的 例子 里 ， 这 个 对 象 告诉 Karma 监 控 文 件 publicjs/ 
watch-mejs 的 变更 ， 但 不 在 页 面 上 包含 它 ， 也 不 把 它 提 供 成 URL : 





























{ 
pattern: 'public/js/watch-me.js', 
watched: true, 
included: false, 
served: false 
} 








注意 ， 使 用 对 象 的 原因 是 要 对 文件 或 者 文件 模式 提供 细 粒 度 的 控制 。 因 此 ，pattern 属 性 是 
必须 的 。 其 他 属性 , 比如 included, 是 有 默认 值 的 , 所 以 只 有 当 模式 偏离 常态 的 时 候 才 需要 设置 。 

我 们 来 讨论 一 下 每 个 选项 和 它们 默认 值 的 细节 。 

pattern 模式 是 一 个 正则 表达 式 ， 匹 配 测试 文件 ， 这 个 选项 可 以 是 单个 文件 ， 也 可 以 是 文件 
的 一 种 模式 ， 它 们 符合 前 面 列 出 的 字符 串 的 特征 。 

watched 如 果 Karma 设 置 成 使 用 autowatch ， 这 个 布尔 值 用 于 指定 文件 是 否 会 被 监控 。 如 
果 它 被 列 为 true ，Karma 会 在 这 个 文件 被 修改 时 运行 测试 。 如 果 设 置 成 false， 这 些 测 试 就 不 
会 运行 。 


如 果 watched 没 有 列 在 配置 对 象 的 属性 中 ， 这 个 对 象 列 出 的 文件 默认 会 被 监控 (true )。 
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included ”这 个 布尔 值 告诉 Karma 在 浏览 器 中 使 用 cscript> 标 签 来 加 载 文 件 。 如 果 这 个 选项 
设置 成 true ,浏览 器 会 加 载 这 些 文件 。 如 果 设 置 成 false ， 我 们 就 要 负责 手动 加 载 它 们 。 一 般 这 
个 选项 是 跟 RequireJS 结合 使 用 的 。 
默认 情况 下 ， 文 件 被 设置 成 使 用 cscript> 标 签 包含 (true )。 


served 这 个 布尔 值 告诉 Karma 通 过 Karma Web 服 务 器 提供 这 个 文件 。 如 果 设 置 成 true， 这 
个 文件 就 可 以 通过 Web 服 务 器 来 访问 ， 如 果 是 false， 就 不 能 。 默 认 这 个 选项 设置 成 true ， 所 以 
这 些 文件 能 在 Web 服 务 器 上 访问 。 


5. 顺序 


文件 列 出 的 顺序 很 重要 ,所 以 我 们 要 把 库 放 在 应 用 文件 之 前 ， 因 为 它们 会 被 依赖 。 如 果 列 了 
一 个 模式 ， 文 件 会 按照 字母 顺序 排序 然后 包含 进来 。 


每 个 文件 只 会 被 包含 一 次 ， 所 以 如 果 一 个 文件 被 匹配 了 多 个 模式 ， 它 只 会 被 包含 一 次 。 
关于 files 属 性 的 完整 示例 : 


files: [ 
// 简单 字符 事 ， 可 用 于 定位 单个 文件 
"js/app/vendor/angular/angular.js', 
// 或 者 可 以 用 模式 来 定位 一 堆 文 件 
'js/app/*.js', 
// 对 象 
// 当 index.htm1l 文 件 变 更 时 
// 不 运行 测试 
pattern: 'public/index.html', watched: false}, 
// 我 们 也 可 以 设置 文件 不 被 包含 但 仍然 受 监 控 
{pattern: 'public/index.html', included: false} 
] 

































































6. exclude 


Karma 可 以 排除 那些 我 们 在 加 载 测试 时 不 想 引 入 的 文件 。 利 用 exc1lude 选 项 就 可 以 设置 一 个 
不 想 默 认 包 含 的 文件 列表 。 比 如 说 ， 如 果 你 使 用 了 RequireJS ， 这 个 数据 就 很 有 用 了 。 





I 





exclude: [ 
"public/index.html' 
] 


7. basePath 


使 用 basePath 选 项 ， 可 以 把 根 路 径 地 址 设置 为 在 files 和 exclude 属 性 中 定义 的 相对 路 径 。 
如 果 basePath 选 项 是 一 个 相对 地 址 ， 它 会 被 解析 成 相对 于 Karma 配 置 文件 的 位 置 (dirname )。 
































basePath: ” 
8. autoWatch 


将 autowatch 属 性 设置 为 true 会 让 karma 在 files 中 的 文件 发 生变 更 时 执行 已 配置 的 测试 。 使 用 
持续 集成 服务 器 时 ， 监 探 文件 变化 是 不 必要 的 ， 这 时 把 这 个 设置 成 false 就 很 有 用 了 。 





























autoWatch: true, 
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9. captureTimeout 


如 果 浏 览 器 加 载 时 间 超 过 captureTimeout (默认 是 60 秒 或 者 60 000 毫 秒 )，Karma 会 把 i 
杀 掉 ， 再 试 一 次 。 如 果 它 试 了 三 次 还 是 失败 ，Karma 就 不 再 尝试 启动 浏览 需 了 。 














尝 
酮 














captureTimeout: 60000 


10. colors 


Karma 的 默认 输出 是 有 颜色 的 。 如 果 不 想 在 终端 中 显示 带 颜 色 的 输出 ， 可 以 把 colors 属 性 设 
置 成 false 来 关闭 。 


colors: true, 








11. hostname 


主机 名 默认 是 localhost， 如 果 想 要 改变 它 ， 可 以 设置 hostname 属 性 。 























hostname: '127.0.0.1 '， 
12. logLevel 


当 Karma 里 面 什么 东西 出 错 了 或 者 超出 预期 时 ， 能 看 看 更 详细 的 信息 会 比较 有 用 。 我 们 可 以 
设置 1ogLevel 属 性 来 设置 详细 输出 等 级 。 当 运行 一 个 持续 集成 服务 器 时 , 很 可 能 会 要 把 日 志 输 出 
整个 关闭 。 

可 能 的 日 志 值 有 : 


DQ config.LOG_DISABLE 
口 config.LOG_ERROR 
口 config.LOG_WARN 

DQ config.LOG_INFO 

DQ config.LOG_DEBUG 














logLevel: config.LOG_INFO, 
13. 端口 
Karma 的 Web 服 务 器 默认 启动 监听 的 端口 是 9876， 可 以 在 配置 文件 中 自行 修改 这 个 端口 。 








port: 9875 ， 
14. 预 处 理 器 


可 以 在 测试 运行 之 前 让 Karma 预 处 理 文件 。 当 使 用 CoffeeScript" 等 语言 来 编写 测试 时 ， 预 处 
理 就 很 有 用 了 ， 它 不 再 需要 手工 处 理 这 些 文件 。 


CoffeeScript 预 处 理 器 默认 集成 在 Karma 中 ， 但 是 其 他 预 处 理 器 就 需要 通过 npm 来 请 求 额 外 的 
搬 件 了 。 


Karma 可 用 的 预 处 理 吉 包括 : 


口 CoffeeScript 




















CD http://coffeescript.org 
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口 html2js 
其 他 可 以 通过 插件 方式 引入 的 预 处 理 需 有: 








DQ coverage 
口 ng-html2js 
口 ember 


想 要 包含 它们 中 的 一 个 或 多 个 ， 可 以 通过 npm 命 令 来 安装 : 








$ npm install karma-coverage --save-dev 


要 配置 使 用 哪个 预 处 理 器 ， 我 们 可 以 在 配置 文件 映射 里 设置 。 黑 认 的 文件 映射 设置 为 


{'**/*coffee': 'coffee'}, 


preprocessors: { 
'**/*.coffee': ['coffee'] 


} 
也 可 以 设置 多 个 预 处 理 器 。 配 置 依赖 于 我 们 使 用 的 搬 件 。 比 如 我 们 要 配置 CoffeeScript: 








coffeePreprocessor: { 
options: { bare: true } 


} 
我 们 也 可 以 使 用 customPreprocessor 属 性 来 自 定 义 预 处 理 器 。 





customPreprocessor: { 
mini_coffee: { 
base: 'coffee', 
options: { bare: true } 
} 
} 


15. 代理 

Karma 可 以 设置 HTTP 人 代理， 这样 当 我 们 的 测试 取 到 一 个 路 由 时 ， 它 们 可 以 从 远程 服务 器 获 
这 对 于 端 到 端 测试 〈 使 用 了 服务 需 ) 来 说 是 很 有 用 的 ， 也 是 需要 的 。 

这 个 对 象 会 是 一 个 从 路 径 指向 远程 服务 器 的 键 值 对 列表 。 


























proxies: { 
'/': 'http://localhost:9000' 
} 


16. 报表 
Karma 的 报表 也 是 可 以 自 定 义 的 : 可 以 把 报表 设置 成 在 终端 中 显示 关于 所 有 类 型 测试 状态 的 





有 用 输出 。 








默认 情况 下 ， 这 个 选项 被 设置 成 ['progress'] ， 它 会 以 人 类 可 读 的 形式 报告 测试 过 程 。 


progress 和 dots 都 是 Karma 默 认 包含 的 报表 。 








也 可 以 通过 npm 插 件 来 包含 其 他 报表 ， 比 如 growl 和 coverage。 我 们 使 用 npm 来 安装 这 些 插件 : 





$ npm install karma-[plugin-name] --save-dev 





图 灵 社 区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 


19.8 使 用 RequireJS 231 





17. singleRun 
如 果 这 个 布尔 值 被 设置 成 true ，Karma 会 用 所 有 已 配置 的 浏览 器 运行 这 些 测试 一 次 ; 如 果 它 
们 都 通过 了 ， 就 会 看 到 一 个 退出 代码 0， 要 是 有 失败 的 ， 就 会 是 1。 

在 持续 集成 服务 器 上 运行 我 们 的 测试 时 ， 这 个 指标 特别 有 用 。 

18. urlRoot 


这 个 URL 是 Karma 运 行 的 根 URL。 我 们 可 以 用 urlRoot 参 数 来 给 Karma 使 用 的 一 切 URL 加 前 
级 。 使 用 代理 时 ， 这 是 个 好 主意 ， 这 样 来 自我 们 测试 的 调用 不 会 和 服务 器 上 已 有 的 功能 冲突 。 




















19.8 使 用 RequireJS 


要 在 Karma 中 使 用 RequireJS ， 我 们 在 karma.confjs 之 后 还 需要 一 个 额外 的 配置 文件 : 


test-main.jso 


口 karma.conf.js: 负责 Karma 的 配置 (已 经 叙述 )。 
D test-main.js: 负责 给 测试 配置 RequireJS 。 








1. karma.conf.js 

我 们 会 像 平常 一 样 用 Karma 配 置 文件 生成 器 来 配置 karma: 
$ karma init test/karma.conf. js 

当 提 示 使 用 RequireJS 时 ， 选 择 yes。 


当 生 成 器 询问 默认 要 加 载 哪个 文件 时 ， 我 们 需要 选择 不 用 RquireJS 加 载 的 所 有 文件 。 只 包含 
test/test-main.js 也 不 会 有 问题 ， 我 们 马上 就 创建 它 。 


当 我 们 列 出 源码 和 测试 文件 时 , 要 选择 所 有 要 使 用 Requirejs 加 载 的 文件 。 应 当 把 用 Require.js 
加 载 的 所 有 文件 都 列 出 来 ， 包 括 所 有 外 部 库 、 所 有 代码 、 所 有 测试 文件 。 


我 们 需要 用 配置 对 象 来 配置 这 些 文件 ， 把 它们 设置 成 默认 不 包含 。 


这 时 ， 我 们 的 karma.confjs 应 该 是 : 











module .exports = function(config) { 
config.set({ 
basePath: ' 
frameworks: ['jasmine', 'requirejs'], 
files: 
{pattern: 'app/lib/angular.js', included: false}, 
{pattern: 'app/lib/angular-route.js', included: false}, 
{pattern: 'app/lib/angular-mocks.js', included: false}, 
{pattern: 'app/js/**/*.js', included: false}, 
{pattern: 'test/**/*.js', included: false} 
{pattern: 'test/lib/**/*.js', included: false}, 
‘test/test-main.js' 








], 

exclude: [ 
'js/main.js’' 

] 


reporters: ['progress'], 
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port: 9876, 
colors: true, 
logLevel: config.LOG_INFO, 
autoWatch: true, 
browsers: ['Chrome'], 
captureTimeout: 60000 ， 
singleRun: false 

3} 

}; 


OD 注意 我 们 没有 排除 mainjs， 它 是 应 用 开始 的 文件 。 


鉴于 Karma 会 提供 appyis 目 录 下 的 文件 ,我们 来 给 Karma 文 件 服务 器 配置 一 个 起 始 的 上 下 文 ， 
用 相对 路 径 加 载 模块 。 因 为 我 们 想 要 测试 的 baseUrl 和 源码 文件 在 同一 目录 , 所 以 需要 把 basePath 
设置 成 本 地 目录 (.) 。 

2. test/test-main.js 

我 们 的 test-main.js 文 件 会 代替 主 应 用 文件 ， 提 供 引 用 测试 文件 的 能 力 ， 无 需 把 应 用 真正 启动 
起 来 。 

Karma 会 包含 所 有 在 数组 window.karma.files 里 面 的 文件 ， 所 以 我 们 会 在 这 里 发 现 我 们 的 测试 
文件 。 然 后 ， 就 可 以 正常 配置 RequireJS 了 : 











var tests = []; 
for (var file in window.__ karma_.files) { 
if (window. _ karma__.files.hasOwnProperty(file)) { 
if (/Spec\.js$/.test(file)) { 
tests.push(file); 
}}} 


requirejs.config({ 
baseUrl: 'app', 


paths: { 
"jquery': 'l1ib/jquery', 
'angular': 'lib/angular’', 
"angularRoute ': 'lib/angular-route', 
"angularMocks': 'lib/angular-mocks', 
二 
shim: { 
'underscore': { 
exports: '_" 
} 
}y 


// 让 Require.js 加 载 这 些 文件 (我们 所 有 的 测试 ) 
deps: tests, 

// RequireJS 完 成 之 后 就 启动 测试 

callback: window. karma__.start 


} 
测试 看 起 来 将 和 默认 不 使 用 RequireJS 的 情况 不 太一 样 。 可 以 简单 地 像 平 常 一 样 使 用 Require]S， 
把 测试 放 在 define( ) 里 。 例 如 : 


define([ 
'app', 'jquery', "angular ' ， 
"angular ' ， 'angularRoute', "angularMocks 
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]， 
function() { 
describe( 'UnitTest: App', function() { 
// 跟 平常 一 样 
it('is defined', function() { 
expect(_.size([1,2,3] )).toEqual(3) 


起 
}); 
}); 





19.9 Jasmine 
我 们 来 过 一 沉 Jasmine 测 试 框架 。 尽 管 Karma 支 持 多 种 测试 框架 ,但 默认 的 选项 是 Jasmine。 
Jasmine 是 一 个 用 于 测试 JavaScript 代 码 的 行为 驱动 开发 框架 ,既然 我 们 将 要 用 到 Jasmine 语 法 ， 

















Co 


先 大 致 看 一 下 怎样 写 基 于 Jasmine 的 测试 套件 





细则 套件 
Jasmine 套 件 的 核心 部 分 是 qescribe 函 数 。 这 个 函数 是 Jasmine 套 件 定义 的 一 个 全 局 函数 ， 所 

















19.9.1 

以 可 以 在 测试 中 直接 调用 。 
describe( ) 函数 带 有 两 个 参数 ， 一 个 字符 串 ， 一 个 函数 。 字 符 串 是 待 建立 的 细则 (spec ) 套 
时 装 了 测试 套件 。 





件 名 称 或 者 描述 ， 函 数 


describe('Unit test: MainController', function() { 
上 
可 以 和 散 套 这 些 describe( ) 函数 ， 这 样 我 们 可 以 创建 一 个 测试 树 来 执行 那些 在 测试 中 设置 的 


不 同 条件 。 

describe('Unit test: MainController', function() { 

describe('index method', function() { 
// 细则 放 这 里 


}); 
使 用 describe( ) 函数 把 相关 的 细则 分 组 是 个 不 错 的 主意 。 在 每 个 describe() 块 运行 时 ， 这 
EF 





2 
些 字符 串 会 沿 着 细则 的 名 称 链接 起 来 。 因 此 ， 上 面 这 个 例子 的 标题 就 会 变 成 “Unit test: 





MainController index method.” 


然后 ， 这 些 describe( ) 块 的 标题 就 会 被 追加 到 细则 的 标题 上 。 设 计 这 个 步 又 的 目的 是 让 我 
们 以 完整 句子 来 阅读 细则 的 ， 所 以 把 测试 命名 成 可 读 的 英文 就 很 重要 了 。 





19.9.2 ”定义 一 个 细则 

我 们 通过 调用 it( ) 函数 来 定义 一 个 细则 。 这 个 函数 也 是 在 Jasmine 测 试 套件 中 定义 的 全 局 函 
数 ， 所 以 可 以 从 测试 中 直接 调用 。 

it( ) 函数 带 有 两 个 参数 : 一 个 字符 串 ， 是 细则 的 标题 或 者 描述 ; 一 个 函数 ,包含 了 一 个 或 多 


生 版 权 





个 用 于 测试 代码 功能 的 预期 。 
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这 些 预期 都 是 函数 ， 执行 时 评估 为 true 或 false。 一 个 所 有 预期 都 为 true 的 测试 就 算是 一 条 
通过 的 细则 ， 一 条 细则 有 一 个 或 者 多 个 预期 为 false 的 话 ， 就 是 个 失败 的 测试 。 


一 个 简单 的 测试 可 能 像 这 样 : 








describe('A spec suite', function() { 
it('contains a passing spec', function() { 
expect(true ) .toBe(true ) ; 
}); 
所 
这 个 细则 的 标题 ， 追 加 到 describe( ) 标 题 之 后 ， 就 成 为 了 “一 个 细则 套件 包含 一 条 已 通过 
的 细则 ”。 


19.10 ”预期 


测试 应 用 时 , 我 们 会 想 要 断言 条 件 在 应 用 的 不 同 阶段 是 符合 我 们 期 望 的 。 我 们 要 写 的 这 个 测 
试 读 起 来 就 像 这 样 :“ 如 果 我 们 点 击 这 个 按钮 ， 就 期 望 有 这 个 结果 。” 例如 ,“ 如 果 我 们 导航 到 首 
页 ， 我 们 期 望 欢迎 信息 会 被 泻 染 出 来 。 


使 用 expect( ) 函数 来 建立 预期 。expect( ) 函数 带 有 一 个 单 值 参数 。 这 个 参数 被 称 为 真实 值 。 
要 建立 一 个 预期 ， 我 们 给 它 串 联 一 个 带 单 值 参数 的 匹配 器 函数 ， 这 个 参数 就 是 期 望 值 。 


这 些 匹 配器 函数 实现 了 一 个 在 真实 值 和 期 望 值 之 间 的 布尔 比较 。 可 以 通过 在 调用 匹配 器 之 前 
调 一 个 not 来 创建 测试 的 和 否定 式 。 




















describe('A spec suite', function() { 
it('contains a passing spec', function() { 
expect(true ) .toBe(true ) ; 
}); 
it('contains another passing spec', function() { 
expect(false).not.toBe(true); 
}); 
二) 


Jasmine 自 带 一 大 堆 内 置 的 匹配 器 ， 我 们 可 以 在 测试 应 用 的 过 程 中 使 用 。 要 写 一 个 自 定义 的 
匹配 需 也 很 容易 。 





19.10.1 内置 的 匹配 器 


1. toBe 
toBe( ) 匹 配器 使 用 JavaScript 操 作 符 === 来 比较 值 : 


describe('A spec suite', function() { 
it('contains passing specs', function() { 
var value = 10, 
another_value = value; 
expect(value) .toBe(another_value); 
expect(value).not.toBe(null); 
上 
})3 
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2. toEqual 
toEqual() 匹 配器 比较 的 是 值 ， 对 简单 字面 量 和 变量 有 效 : 











describe('A spec suite', function() { 
it('contains a passing spec', function() { 
var value = 10; 
expect(value).toEqual(10); 

}); 

} 


3. toMatch 


toMatch( ) 匹 配器 使 用 正则 表达 式 匹配 字符 串 : 


describe('A spec suite', function() { 
it('contains a passing spec', function() { 
var value = "<h2>Header element: welcome</h2>"; 
expect(value).toMatch(/welcome/); 
expect(value).toMatch( 'welcome'); 
expect(value) .not.toMatch( 'goodbye' ); 
}); 
1 


4. toBeDefined 
toBeDefined( ) 匹 配 带 将 值 与 undefined 进 行 比较 : 


describe('A spec suite', function() { 
it('contains a passing spec', function() { 
var value = 10, 
undefined_value = undefined; 
expect(value) .toBeDefined(); 
expect(undefined_value) .not .toBeDefined(); 
}); 
5 


5. toBeUndefined 
toBeUndefined() 匹 配器 的 功能 跟 toBeDefined() 匹 配 吉 相 反 : 


describe('A spec suite', function() { 
it('contains a passing spec', function() { 
var value = 10, 

undefined_value = undefined; 
expect(undefined_value) .toBeUndefined( ); 
expect(value) .not .toBeUndefined() ; 
}); 

}); 





6. toBeNull 
toBeNul1() 匹 配器 将 值 与 nul1 进 行 比较 : 


describe('A spec suite', function() { 
it('contains a passing spec', function() { 
var value = null, 
not_null_value = 10; 
expect(value).toBeNull(); 
expect(not_null_value).not.toBeNull1(); 
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上 
9 


7.toBeTruthy 
toBeTruthy() 匹 配器 把 值 转换 为 布尔 类 型 之 后 与 true 进 行 比较 : 








describe('A spec suite', function() { 
it('contains a passing spec', function() { 


var value = 10, 
undefined_value; 

expect(value) .toBeTruthy( ); 

expect(undefined_value) .not .toBeTruthy(); 


}); 
}); 
8. toBeFalsy 

toBeFalsy() 匹 配器 把 值 转换 成 布尔 类 型 之 后 与 false 比 较 : 





describe('A spec suite', function() { 
it('contains a passing spec', function() { 


var value = 10, 
undefined_value; 
expect(undefined_value) .toBeFalsy(); 


expect(value).not.toBeFalsy(); 
}); 
}); 
9. toContain 


toContain( ) 匹 配 右 检测 一 个 条 目 是 否 在 数组 中 : 








describe('A spec suite', function() { 
it('contains a passing spec', function() { 
var arr = [1,2,3,4]; 
expect(arr).toContain(4); 
expect(arr).not.toContain(12); 
}); 
上 


党 


10. toBeLessThan 
toBeLessThan( ) 匹 配器 建立 了 一 个 期 望 ， 比 较 一 个 数值 是 否 小 于 预期 ; 





describe('A spec suite', function() { 
it('contains a passing spec', function() { 


var value = 10; 
expect(value) .toBeLessThan(20); 
expect(value).not.toBeLessThan(5); 
}); 
1 
11. toBeGreaterThan 
toBeGreaterThan( ) 匹 配 需 建 立 了 一 个 期 望 ， 比 较 一 个 数值 是 否 大 于 预期 : 








describe('A spec suite', function() { 
it('contains a passing spec', function() { 


var value = 30; 
expect(value) .toBeGreaterThan(40) 
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expect(value ) .not .toBeGreaterThan(20) 


中 
] ) ; 





12. toBeCloseTo 
toBeCcloseTo() 匹 配 需 在 一 个 指定 的 精度 级 别 内 比较 一 个 值 是 否 接近 另 一 个 值 : 





describe('A spec suite', function() { 
it('contains a passing spec', function() { 
var value = 30.02; 
expect(value).toBeCloseTo(30, 0); 
expect(value) .not.toBeCloseTo(20, 2); 

}); 

多 


13. toThrow 
toThrow() 匹 配器 验证 一 个 函数 是 否 抛 出 了 异常 : 








describe('A spec suite', function() { 
it('contains a passing spec', function() { 
expect(function() { 
return a + 10; 
}) .toThrow( ) ; 
expect(function() { 
return 2 + 10; 
}) .not.toThrow( ) 
二 
二 


14. 创建 自 定义 匹配 器 
在 代码 中 面 对 更 复杂 情况 时 ， 会 需要 创建 自己 的 匹配 器 ，Jasmine 让 这 变 得 非常 容易 。 要 创 
建 一 个 匹配 器 ， 我 们 可 以 在 Jasmine 块 中 调用 addMatcher( ) 函数 ， 带 和 人 一 个 值 : 


describe('A spec suite', function() { 
this.addMatchers({ 
toBeLessThanOrEqual: function(expected) { 
return this.actual 《= expected; 
} 
I 
上 


然后 就 可 以 在 测试 套件 里 定义 的 任意 测试 中 调用 这 个 toBeLessThanorEqual() 匹 配 加 了 。 





19.10.2 ”安装 和 和 卸载 


除了 手动 在 每 个 测试 中 设置 测试 条 件 ， 我们 可 以 使 用 peforeEach 方 法 来 运行 一 组 设置 函数 。 
beforeEach( ) 函数 带 一 个 参数 : 一 个 函数 ， 在 每 个 细则 运行 之 前 被 调用 一 次 。 它 可 以 在 一 个 描 
述 块 中 使 用 ， 就 像 这 样 : 


describe('A spec suite', function() { 
var message; 
beforeEach(function() { 
message = "hello "; 


二 这 


it('should say hello world', function() { 
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expect(message + "world").toEqual("hello world"); 
13 
it('should say hello ari', function() { 
expect(message + "ari").toEqual("hello ari"); 
1 
}); 


我 们 也 可 以 重 置 条 件 ( 例如， 使 用 afterEach( ) 函数 清除 数据 库 ， 或 者 通过 模拟 冲 掉 所 有 请 
求 )。 与 beforeEach( ) 函数 类 似 ， 它 也 带 有 一 个 参数 : 一 个 函数 ， 会 在 每 个 细则 跑 完 之 后 执行 。 

















describe('A spec suite', function() { 
var count; 
afterEach(function() { 
count = 0; 
}); 
it('should add one to count', function() { 
count += 1; 
expect(count).toEqual(1); 
} 3»; 
it('should check for the reset value', function() { 
expect(count ) .toEqual(0); 
] ) ; 
5 


在 能 套 的 描述 块 中 ,这 些 beforeEach 和 afterEach 方 法 是 被 串 起 来 的 ， 所 以 我 们 可 以 建立 更 
复杂 的 测试 树 ， 而 无 需 重 复 代 码 。 




















19.11 ” 端 到 端的 介绍 

做 端 到 端 测试 时 ， 我 们 会 使 用 Angular 场 景 运行 器 。Angular 场 景 运行 器 模拟 了 用 户 交 互 ， 这 
样 我 们 可 以 更 准确 地 评估 应 用 的 状态 。 

编写 场景 测试 时 ,我 们 要 描述 应 用 在 不 同情 境 下 应 有 的 行为 。 就 像 在 单元 测试 里 ,我们 也 用 
Jasmine 来 建立 期 望 和 行为 。 

测试 应 用 时 ,我 们 会 直接 使 用 场景 运行 器 的 API 来 控制 浏览 器 。 利 用 这 个 API, 我 们 能 通过 
不 同 的 动作 操作 浏览 器 ， 包 括 在 输入 框 中 输入 数据 ， 选 择 元 素 ， 导 航 页 面 ， 控 制 浏览 器 的 流 ， 
等 等 。 

我 们 要 使 用 的 核心 基础 API 是 browser( ) 方 法 ， 这 个 方法 返回 一 个 对 象 ， 为 了 控制 浏览 器， 
可 以 在 这 个 对 象 上 面 串 一 些 方法 。 

场景 运行 需 通 过 打开 一 个 浏览 需 和 窗口， 能 入 一 个 iftame 的 方式 来 运行 。 这 个 iame 就 是 Karme 
运行 应 用 测试 ， 跟 踪 场 景 运行 器 成 功 或 者 失败 结果 的 地 方 。 

1. 导航 页 面 

要 在 测试 浏览 器 frame 里 面 加 载 一 个 URL， 我 们 使 用 navigateTo 函 数 ， 它 带 有 一 个 参数 : 要 
加 载 的 URL。 






























































browser( ) .navigateTo(url) 


我 们 也 可 以 通过 调用 一 个 方法 取得 一 个 URL 的 方式 来 动态 加 载 这 个 URL。 这 个 调用 一 般 用 于 
我 们 在 写 测试 或 者 检测 某 个 操作 的 结果 时 ， 不 知道 目的 URL 的 情况 下 。 
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browser().navigateTo(title, function() { 
// 在 这 里 返回 动态 url; 
return '/'; 


}); 
2. 刷新 页 面 
可 以 在 测试 frame 里 刷新 当前 加 载 的 页 面 : 





browser() .reload() 
3. 操作 window 对 象 

可 以 获取 在 测试 frame 里 当前 加 载 页 面 的 超 链接 : 
browsert ) .window() .href() 

要 获取 测试 frame 中 当前 加 载 页 面 的 路 径 ， 用 下 面 这 个 语句 : 
browser() .window( ) .path( ) 

要 获取 测试 frame 中 当前 加 载 页 面 的 搜索 字符 串 ， 执 行 : 
browser() .window( ) .search( ) 

可 以 像 下 面 这 样 获取 测试 fame 里 当前 加 载 页 面 最 后 一 次 的 hash: 


1 // 散 列 返回 的 时 候 不 带 # 


2 browser().window().hash(); 
4. 位置、 位置、 位置 
要 获取 测试 frame 中 当前 加 载 页 面 的 $1ocation.ur1()， 我 们 用 : 





Browserty location( .uriC) 
可 以 用 这 种 方式 获取 测试 fame 中 当前 加 载 页 面 的 $location.path() : 
browser( ). Locationt). pathty 

要 像 这 样 获取 当前 页 面 的 $1ocation.search() 也 是 很 容易 的 : 
browser(). Location().searcht() 


最 后 ， 也 能 获取 到 当前 页 面 的 hash: 





browser().1location().hash() 

5. 建立 预期 

想 真 正 校 验 我 们 的 应 用 是 按照 期 望 来 运行 的 , 需要 建立 对 某 一 状态 的 断言 。 我 们 可 以 用 端 到 
端 和 场景 API 的 组 合 来 做 到 这 一 点 。 


使 用 expect()，, 我 们 断言 给 定 future 对 象 是 否 与 匹配 器 相符 。 场景 API 给 出 的 任何 返回 值 都 是 
一 个 场景 运行 名 将 要 解析 的 future 对 象 ， 我 们 会 校 验 这 个 最 终 的 值 是 不 是 我 们 所 期 望 的 结果 。 














expect(browser().1location().path()) 
.toBe('/') 

// 或 者 用 not() 来 否定 这 个 期 户 

expect(browser( ) .location().path()) 
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.Not().toBe('/home') 
6. 跟 内 容 交 互 


端 到 端 测试 特别 强大 ,因为 我 们 实际 就 在 加 载 用 户 将 要 看 到 的 页 面 , 所 以 我 们 可 以 突 视 他 们 
所 能 看 到 的 结果 ， 并 且 验 证 它 看 上 去 是 对 的 ， 并 且 以 我 们 预期 的 样子 在 运行 。 


我 们 可 以 选择 元 素 , 在 输入 框 中 输入 值 ， 点 击 按钮 ,， 校 验 内 容 是 否 出 现在 该 出 现 的 地 方 , 遍 
历 循 环 器 ， 等 等 。 


要 选择 页 面 上 的 元 素 ， 使 用 element() 方 法 。 这 个 API 带 两 个 参数 : 


口 选择 需 -一 jQuery HTML 元 素 选 择 吉 ; 
口 标签 一 用 于 在 浏览 器 或 者 终端 输出 的 文本 字符 串 。 


element("form", "the signup form") 


有 了 这 个 选中 的 元 素 ， 我 们 就 可 以 执行 方法 来 查询 它 在 页 面 上 的 状态 。 要 检测 匹配 给 定 
jQuery 选择 回 的 元 素数 目 : 


element("input", "input elements").count() 

要 点 击 一 个 元 素 ( 比如 一 个 提交 按钮 )， 可 以 调用 : 
element("button", "submit button").click() 

可 以 使 用 query( ) 方 法 在 给 定 jQuery 选 择 器 上 执行 一 个 方法 。 
// 选择 页 面 上 所 有 的 链接 


element("a", "all links").query( 
// 所 有 这 些 链接 
// 都 会 作为 元 素 传 给 函数 
function(elements, done) { 
// 对 每 个 元 素 做 些 想 做 的 事 
angular .forEach(elements, function(ele) { 
expect(ele.attr('ng-click')) 
.toBeDefined( ); 





























} 
done( ); // 告诉 场景 运行 器 我 们 做 完了 











可 以 查阅 每 个 元 素 ， 在 jQuery 属性 上 设置 不 同 的 期 望 。 
可 以 获取 或 者 设置 一 个 元 素 的 值 : 


element("button", "submit button").val() 


// 设置 
element("button", "submit button").val("Enter") 
可 以 获取 或 者 设置 文本 : 





// 获取 一 块 HTML 的 文本 内 容 

element("h1i", "header").text() 

// 设置 

element("h1i", "header").text("Header text") 


可 以 获取 或 者 设置 元 素 的 HTML: 


// 获取 元 素 的 HTML 
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element("h1i", "header").html() 
// 设置 
element("h1i", "header").html("<h2>New header«</h2>") 


要 设置 或 者 获取 高 度 : 


// 获取 元 素 的 高 度 

element("div", "signup box").height() 

// 设置 

element("div", "signup box").height('200px ') 


要 获取 或 者 设置 innerHeight : 


// 获取 元 素 的 innerHeight 

element("div", "signup box").innerHeight() 

// 设置 

element("div", "signup box").innerHeight('190px') 


要 设置 或 者 获取 outerHeight : 


// 获取 元 素 的 outerHeight 

element("div", "signup box").outerHeight() 

// 设置 

element("div", "signup box").outerHeight('210px') 


要 设置 或 者 获取 宽度 : 


// 获取 元 素 的 宽度 

element("div", "signup box").width() 

// 设置 

element("div", "signup box").width('3060px') 


要 设置 或 者 获取 innerwidth : 


// 获取 元 素 的 'innerWidth' 

element("div", "signup form").innerWidth() 

// 设置 

element("div", "signup form").innerWidth('2006px') 


要 设置 或 者 获取 outerwidth : 


// 获取 元 素 的 'outerWidth' 

element("div", "signup form").outerwidth( ) 

// 设置 

element("div", "signup form").outerWidth('305px') 


要 设置 或 者 获取 元 素 的 位 置 : 


// 获取 元 素 的 位 置 





element(".1ogo"，"our logo").position() 
// 设置 
element(".1ogo"，"our logo").position("absolute") 


要 获取 或 者 设置 scrollLeft: 


// 获取 元 素 的 scrollLeft 
element("#signup_form", "signup form").scrollLeft() 
// 设置 


element("#signup_form", "signup form").scrollLeft(O) 


要 获取 或 者 设置 scrol1Top 的 值 ， 用 这 个 值 可 以 强制 浏览 器 深 定 到 指定 元 素 : 


图 灵 社 区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 





242 第 19 章 测试 





// 获取 元 素 的 scrol1Top 值 


element("#signup_form", "signup form").scrollTop() 
// 设置 

element("#signup_form", "signup form").scrollTop(O) 
要 获取 或 者 设置 偏 移 量 : 

// 获取 元 素 的 偏 移 量 

element("#signup_form", "signup form").offset() 

// 设置 

element("#signup_form", "signup form").offset(0); 








也 可 以 在 jQuery 选择 器 中 查询 或 者 变更 一 个 元 素 的 值 ， 可 以 获取 特性 〈 使 用 attr ): 


element("div", "signup box").attr('width') 
// 设置 
element("div", "signup box").attr('width', '1006%') 


可 以 获取 一 个 属性 ( 使 用 prop ): 





ement("div", "signup box").prop('width') 
/ 设置 
ement("div", "signup box").prop('width', "100% ' ) 


还 可 以 获取 CSS ( 使 用 css ): 


[0 


es 





[0 








element("div", "signup box").css('border-color') 
// 设置 
element("div", "signup box").css('border-color', 'red') 





除了 使 用 element( ) 获 取 元 素 , 还 有 其 他 与 内 容 交 互 的 方式 。Angular 的 场景 运行 需 包 含 了 一 
些 不 同 的 帮助 方法 ， 能 让 我 们 查询 和 操作 已 泻 染 的 DOM。 


我 们 可 以 追溯 自己 所 感 兴趣 的 : Angular 对 不 同 元 素 的 元 素 的 认 知 。 可 以 选中 它们 ， 找 到 绑 
定 ， 与 输入 元 素 交 互 ， 查 询 页 面 以 测试 原生 的 Angular 绑 定 。 

7. 选择 页 面 上 的 元 素 

场景 运行 如 为 我 们 建立 的 最 底层 帮助 函数 之 一 是 using( ) 函数 。 利 用 该 函数 ， 我 们 可 以 用 
jQuery 类 型 的 元 素 选 择 符 定 位 指定 的 元 素 。 


























it('does not test anything yet', function() { 
// 定位 指定 元 素 
using('.input_email').binding('email'); 


}); 
using() 方 法 最 多 可 带 两 个 参数 。 
口 jQuery 选择 器 。 我 们 用 这 个 选择 器 来 选 定 页 面 上 的 元 素 。 
口 标签 ( 可 选 的 字符 串 )。 这 个 字符 串 是 一 个 标签 ， 运 行 器 用 它 在 测试 的 输出 中 标识 这 个 选 
择 器 。 

8. 与 Angular 的 绑 定 进行 交互 

场景 运行 器 包含 了 一 个 途径 ， 可 以 深入 到 Angular 建 立 的 绑 定 中 ， 这 样 就 可 以 从 DOM 上 查询 
到 Angular 的 绑 定 ， 然 后 从 这 个 指定 元 素 上 选择 第 一 个 绑 定 关系 。 

例如 ， 如 果 我 们 有 一 段 H8TML， 在 它 上 面包 含有 $scope 元 素 的 属性 名 : 
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' ng-model="name" /> 





<input type="text' 


可 以 用 binding( ) 方 法 查询 作用 域 中 指定 的 绑 定 : 


it('should update the name', function() { 
using(' .form').input('name').enter('Ari'); 


expect( 
using(' .form').binding( 'name') 


) .toBe(l 'Ari'); 
}); 
binding() 方 法 带 有 一 个 名 称 参数 ， 该 参数 是 字符 串 类 型 。 


这 个 字符 串 是 我 们 在 查询 中 所 关注 的 DOM 元 素 上 的 绑 定 名 称 。 

9. 与 输入 元 素 交 互 

我 们 也 可 以 跟 页 面 上 的 输入 元 素 交 互 。 如 果 想 要 在 一 个 文本 框 中 输入 文字 , 选中 一 个 复 选 框 ， 
或 者 选择 一 个 option 元 素 的 值 ， 可 以 使 用 input() 方 法 。 

input() 方 法 自身 返回 一 个 对 象 ， 我们 可 以 调用 这 个 对 象 的 方法 来 跟 元 素 进行 交互 。 它 带 有 


一 个 名 称 参数 ， 该 参数 是 字符 串 类 型 。 
这 个 名 称 是 相应 的 ng-mode1 的 名 称 。 
我 们 能 从 输入 框 上 调用 下 列 方法 。 
enter()。enter() 方 法 向 一 个 输入 框 输入 值 。 


给 定 HTML: 














<input type="text" ng-model="name" /> 


可 以 这 样 向 输入 框 输入 'Ari': 

input( 'name' ).enter( 'Ari'); 
check()。check() 方 法 检测 一 个 复 选 框 的 值 。 
给 定 HTML: 

<input type="checkbox" ng-model="save" /> 
可 以 使 用 如 下 语句 检测 这 个 叫 "save" 的 复 选 框 : 


input('name').check(); 


select()。select() 方 法 选中 一 个 单 选 按钮 的 指定 值 。 


给 定 HTML: 


ng-model="color" value="red" /> 
ng-model="color" value="blue" /> 
ng-model="color" value="yellow" /> 


<input type="radio" 
<input type="radio" 
<input type="radio" 
可 以 用 这 样 的 测试 来 选择 单 选 按 钮 : 
input('color').select('red'); 


val()。 最 后 ， 可 以 简单 地 通过 





寺 调 用 输入 元 素 的 .val( ) 来 获取 输入 框 的 当前 值 。 我 们 会 用 这 
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个 来 检验 指定 输入 元 素 的 当前 值 。 


input('color').select('red'); 
input('color').val(); // 颜 色 将 是 "red" 


19.11.1 选项 输入 
要 从 给 定 的 选项 输入 框 上 选中 指定 的 option 值 也 很 容易 。 我 们 会 使 用 select() 方 法 从 


select 标 签 上 选择 一 个 option。 





给 定 HTML: 
<Select ng-model="color" 


ng-options="c.name for C in colors"> 
<option value="">Pick your favorite color"</option> 


</select> 

然后 是 JavaScript: 

select('color') 

select() 方 法 返回 一 个 对 象 , 带 有 一 个 方法 , 可 以 用 于 选择 这 个 select 元 素 的 一 个 选项 。 它 
也 让 我 们 能 在 多 选 select 中 选取 多 个 项 。 

option() 。option( ) 方 法 能 让 我 们 选中 列表 中 的 一 个 值 。 

select('color').option( 'red'); 


option( ) 方 法 带 有 一 个 值 参数 ， 该 参数 是 字符 串 类 型 。 





这 个 value 参 数 是 一 个 字符 串 ， 可 以 让 select 选 中 给 定 的 值 。 

options()。options( ) 方 法 能 让 我 们 选中 多 选 select 中 的 多 个 值 。 

select('color').options('Ghostbusters', 'Titanic'); 

在 必要 的 情况 下 ， 为 了 选中 option 的 值 ，options( ) 方 法 可 以 带 任意 数量 的 参数 ， 这 时 参数 
是 一 组 字符 串 。 

这 组 字符 串 是 要 从 多 选 select 中 选择 的 值 。 








19.11.2 ”重复 循环 元 素 
Angular 通 过 ng-repeat 指 令 ， 使 从 列表 创建 DOM 元 素 变 得 非常 容易 ，Angular 场 景 也 让 我 们 
能 更 容易 测试 这 些 循环 指令 。 
repeater() 国 数 自身 返回 一 个 对 象 , 带 有 多 个 方法 ,用 这 些 方法 可 以 查询 视图 中 的 一 组 元 素 。 
它 最 多 可 带 两 个 参数 。 
口 选择 髓 (字符 串 )。jQuery 选 择 器 ， 指 向 那些 我 们 所 关注 的 元 素 。 
口 标签 (字符 串 ， 可 选 )。 标签 是 用 于 测试 输出 的 一 个 字符 串 。 
下 面 列 出 了 可 对 重复 器 返回 的 一 组 元 素 进行 调用 的 方法 。 对 于 每 个 测试 ， 我 们 用 下 面 这 上段 
HTML 作 示例 : 
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< 七 able id="phonebook "> 
<tT ng-repeat="person in people"> 
<td>{{ person.name }}</td> 
<td>{{ person.email }}</td> 
/try 
“</table> 


方法 如 下 。 

count()。count() 方 法 返回 重复 需 里 有 多 少 行 与 DOM 中 的 jQuery 选择 名 匹配 。 

repeater( '#phonebook tr').count(); 

count 方 法 不 带 参数 ， 就 简单 地 返回 一 个 整数 。 

column()。column( ) 方 法 返回 一 个 数组 ， 数 组 中 的 元 素 是 列 中 的 值 ， 这 些 值 包含 了 与 DOM 
中 jQuery 选择 需 匹 配 的 重复 需 中 的 给 定 绑 定 。 





Tepeater( '#phonebook tr') 
.column( 'person.name' ); 


column( ) 方 法 带 有 一 个 字符 串 类 型 的 绑 定 参数 ， 这 个 绑 定 是 针对 重复 需 中 指定 元 素 的 。 它 
是 在 元 素 中 泻 染 的 绑 定 的 名 称 。 

row()。row() 方 法 返回 一 个 数组 ， 数 组 中 的 元 素 是 行 中 的 值 ， 这 些 值 包含 了 与 DOM 中 给 定 
jQuery 选择 需 匹 配 的 重复 需 中 的 给 定 绑 定 。 




















repeater("#phonebook tr") .row(O); 
row( ) 方 法 带 有 一 个 整形 的 索引 参数 。 
index 是 要 从 中 返回 给 定 绑 定 的 列 的 序号 。 




















19.12 ”模拟 和 测试 帮助 函数 

开始 写 测试 之 前 , 我 们 需要 理解 测试 的 一 个 核心 特性 : 模拟 。 在 测试 中 ,模拟 是 一 个 古老 的 
概念 ， 允 许 我 们 在 受 控 环境 下 定义 模拟 对 象 来 模仿 真实 对 象 的 行为 。 

AngularJS 提 供 了 它 自 己 的 模拟 库 ， 称 为 angular-mocks ， 它 位 于 angular-mock.js 文 件 中 。 模 
拟 对 象 是 专门 设计 用 于 单元 测试 的 。 

要 在 单元 测试 中 建立 模拟 对 象 ， 需 要 确保 在 Karma 配 置 中 包含 了 angular-mock.js 文 件 。 

我 们 必须 确保 test/karma.conf.js 文 件 的 files 数 组 中 包含 了 angular-mock.js。 包 含 了 这 个 依赖 之 
后 ， 就 可 以 创建 Angular 模 块 的 模拟 引用 了 。 

例如 ， 在 一 般 的 单元 测试 设置 里 ， 我 们 会 创建 一 个 describe 执 行 环 境 ， 在 每 个 测试 在 
describe 的 上 下 文中 运行 之 前 ， 我 们 在 这 个 执行 环境 中 调用 angular .mock .module: 











describe('myApp', function() { 
// 模拟 'myApp' angular 模 块 
beforeEach(angular .mock.module( 'myApp' )); 


(Ct) 
站 好 
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注意 ,我 们 只 要 调用 module 就 可 以 了 ,因为 angular .mock.module 函 数 被 发 布 在 全 
局 作用 域 的 window 接 口上 了 。 
建立 了 模拟 的 Aneular 模 块 之 后 , 可 以 把 连接 到 这 个 模块 上 的 任意 服务 注入 到 我 们 测试 代码 里 。 
凭借 这 些 测试 ， 我 们 需要 像 Angular 那 样 在 运行 时 注入 依赖 关系 。 在 我 们 的 单元 测试 中 ， 这 
一 步 是 必要 的 ， 因 为 我 们 隔离 了 想 要 测试 的 功能 。 
要 注入 一 个 依赖 , 在 beforeEach 函 数 调用 中 使 用 angular .mock.inject 方 法 , 类 似 之 前 做 的 
那样 。 


























describe('myApp', function() { 
var scope; 


// 模拟 我 们 的 'myApp' angular 模 块 

beforeEach(angular.mock .module( 'myApp' )); 

beforeEach(angular .mock.inject(function($rootScope) { 
scope = $rootScope. $new(); 


}); 
it('...') 
中) 
类 似 于 module 函 数 ，inject 函 数 也 是 在 window 对 象 上 的 ， 为 的 是 全 局 访问 ， 所 以 
也 可 以 直接 调用 inject。 


在 这 个 测试 中 ， 就 像 在 其 他 几乎 所 有 单元 测试 中 那样 ,我们 想 要 保存 当前 工作 对 象 实例 的 
引用 (在 上 面 例子 中 , 保存 的 是 scope )。 那样 , 我 们 可 以 在 整个 it( ) 子 句 中 对 这 个 对 象 引 用 进 
行 操作 。 
通常 , 我们 会 用 将 引用 注入 进 测试 时 使 用 的 名 字 来 保存 它 。 比 如 , 如 果 我 们 在 测试 一 个 服务 ， 
可 以 注入 这 个 服务 , 然后 把 它 的 引用 用 一 种 稍微 不 同 的 命名 方案 存储 起 来 。 我 们 想 在 注入 的 服务 
名 称 两 端 使 用 下 划 线 ， 这 样 当 它 被 注入 时 ， 注 入 融会 忽略 它 的 名 称 。 


describe('myApp', function() { 
var myService; 





























// 模拟 我 们 的 'myApp'angular 模 块 
beforeEach(module( 'myApp' )); 
beforeEach(inject(function(_myService_) { 
myService = _myService_; 
}); 
下 
}); 


19.13 ”模拟 $httpBackendq 





Angular 也 内 置 了 $httpBackend 模 拟 库 ， 这 样 我 们 可 以 在 应 用 中 模拟 任何 外 部 的 XHR 请 求 ， 
避免 在 测试 中 创建 昂贵 的 $http 请 求 。 


$httpBackend 服 务 是 一 个 假 的 HTTP 后 端 实现 ， 能 让 我 们 隔离 和 指定 外 部 服务 右 可 能 处 于 的 
条 件 ， 这 样 我 们 可 以 精确 确定 应 用 在 不 同 条 件 下 的 行为 。 


使 用 $httpBackend ， 我 们 可 以 校 验 一 个 请 求 的 产生 ， 对 响应 打桩 、 基 于 远程 服务 器 的 响应 
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来 设置 断言 ， 用 于 校 验 对 应 用 行为 的 期 望 。$httpBackend 仅 在 单元 测试 中 使 用 。 





在 端 到 端 测 试 中 也 可 以 用 $httpBackend 服 务 ， 但 是 这 么 做 一 般 测 不 全 整个 应 
用 ， 因 为 没有 使 用 真正 的 服务 器 。 





使 用 $httpBackend 的 测试 可 行 是 因为 劫持 了 依赖 注入 链 : 我 们 注入 了 模拟 的 $httpBackend， 
而 不 是 使 用 $http 服 务 产生 实际 HTTP 请 求 的 正版 $httpBackend 服 务 。 这 样 就 不 需要 为 了 支持 测 
试 而 修改 应 用 。 

1. 冲刷 HTTP 请 求 

在 生产 中 ，$httpBackend 异 步 响应 请 求 ， 这 在 测试 环境 中 基本 很 难 配置 。 因 而 ， 我 们 需要 
在 测试 的 最 后 手动 冲刷 一 切 挂 起 的 请 求 ， 这 样 才能 清理 仍然 保持 了 $httpBackend 异 步行 为 的 执 
行 环境 。 

$httpBackend 带 有 两 个 方法 ， 用 于 配置 模拟 的 后 端 系统 来 处 理 HTTP 响 应 ， 这 两 个 方法 是 
except 和 when ， 它 们 有 不 同 的 使 用 场景 。 

通常 ， 在 一 个 单元 测试 中 , 我 们 要 确保 配置 的 所 有 请 求 最 终 都 按照 预期 运行 了 ， 如 果 没 有 的 
话 就 抛 出 异常 。 此 外 ， 还 要 确保 每 个 测试 结束 时 ， 不 会 仍 有 未 结束 的 请 求 挂 起 。 

可 以 在 一 个 afterEach 块 中 用 两 个 方法 来 处 理 这 两 种 情况 : 


pA 

afterEach(function() { 
$httpBackend.verifyNoOutstandingExpectation(); 
$httpBackend.verifyNoOutstandingRequest(); 

上 


有 的 情况 下 ， 我 们 要 重 置 所 有 已 设置 请 求 的 预期 。 要 在 一 个 多 阶段 测试 内 部 复 用 
$httpBackend 的 同一 实例 时 ， 会 出 现 这 种 情况 。 


可 以 用 resetException() 方 法 来 重 置 它们 : 




















A rds 

it('should be a multiple-phase test', function() { 
HH sea 
$httpBackend.resetExpectations( ); 
A 

}); 

2. expect 





except 方 法 建立 了 一 个 请 求 的 期 望 , 用 于 对 应 用 产生 的 请 求 作出 断言 , 也 用 于 定义 它们 的 响 
如 果 预 期 的 请 求 没 有 产生 ,或 者 不 正确 地 产生 了 ,测试 就 失败 了 。 这 些 请 求 预 期 用 于 建立 断 
2 请 求 已 被 产生 。 

except 方 法 带 有 两 个 必 选 参数 、 两 个 可 选 参数 。 


口 method: 字符 串 HTTP 方 法 ， 就 像 "GET" 或 者 "POST" 。 
口 url: 期 望 调用 的 HTTP URL 或 者 是 一 个 函数 接受 给 定 URL 并 返回 一 个 标识 它 是 否 匹 配 的 
布尔 值 。 如 果 匹 配 它 应 该 返回 true ， 否 则 返回 false。 





Il 过 
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口 data (可 选 ): HTTP 请 求 的 主体 ， 或 者 是 个 函数 ， 接 受 一 个 data 字 符 串 并 且 在 data 符 合 
预期 时 返回 true (也 as 

口 headers (可 选 ): HTTP 头 或 者 函数 ， 该 函数 接收 header 对 象 作 为 参数 ， 并 且 在 headers 
匹配 预期 时 返回 true。 


except 方 法 返回 一 个 对 象 ， 该 对 象 的 respond 方 法 用 于 控制 在 测试 中 如 何 处 理 匹配 请 求 。 


describe('Remote tests', function() { 
var $httpBackend, $rootScope, myService; 














beforeEach(inject( 
function( 

_$httpBackend_, _$rootScope 
$httpBackend = _$httpBackend_; 
$rootScope = _$rootScope.; 

// myService 是 一 个 服务 
// 为 我 们 产生 HTTP 调 用 
myService = _myService_; 


})); 


myService_) { 


| 


it('should make a request to the backend', function() { 
// 建立 一 个 预期 
// myService 会 向 路 由 发 送 一 个 GET 请 求 
// /vi/api/current_user 
$httpBackend.expect('GET', '/vi/api/current_user') 

.Tespond(200，{userId: 123}); 

myService.getCurrentUser(); 
// 冲刷 请 求 很 重要 
$httpBackend. flush(); 

上 

9 


$httpBackend.expect 方 法 带 有 几 个 帮助 函数 ， 让 我 们 能 更 加 具体 地 描述 设置 的 预期 。 
expectGET( ) 为 GET 方 法 创建 了 一 个 新 的 请 求 预期 ，expectGET( ) 带 有 两 个 参数 。 


口 url: 一 个 HTTP URIL 或 者 接受 UREL 的 函数 ， 并 且 该 UREL 匹 配 当 前 定义 时 返回 true。 
口 headers ( 可 选 ): HTTP 头 。 











A 
$httpBackend.expectGET("/vi/api/current_user") 


expectHEAD( ) 为 HEAD 方 法 创建 了 一 个 新 的 请 求 预期 。 它 带 有 两 个 参数 。 


口 url: 一 个 HTTP URIL 或 者 接受 UREL 的 函数 ， 并 且 该 UREL 匹 配 当 前 定义 时 返回 true。 
口 headers ( 可 选 )，HTTP 头 。 








Wa 
$httpBackend.expectHEAD("/vi/api/current_user") 


expectJSONP( ) 为 JSONP 请 求 创建 了 一 个 新 的 请 求 预 期 。 它 只 带 有 一 个 参数 。 
口 url: 一 个 HTTP URIL 或 者 接受 URL 的 函数 ， 并 且 该 URL 匹 配 当前 定义 时 返回 true。 


A Bs 
$httpBackend .expectJSONP("/vi/api/current_user") 


expectPATCH( ) 为 PATCH 请 求 创建 了 一 个 新 的 请 求 预期 。 它 接受 三 个 参数 。 
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口 url: 一 个 HTTP URL 或 者 接受 URL 的 函数 ， 并 且 该 URL 匹 配 当 前 定义 时 返回 true。 
口 data (可 选 ): HTTP 请 求 的 主体 ， 或 者 是 个 函数 ， 接 受 一 个 data 字 符 串 并 且 在 data 符 合 


预期 时 返回 true ， 或 者 是 一 个 用 JSON 格 式 发 送 HTTP 主 体 的 JavaScript 对 象 。 
口 headers (可 选 ): HTTP 头 。 











人 
$httpBackend.expectPATCH("/vi/api/current_user") 


expectPOST( ) 为 POST 请 求 创建 了 一 个 新 的 请 求 预期 。 它 带 有 三 个 参数 。 
口 url: 一 个 HTTP URL 或 者 接受 URL 的 函数 ， 并 且 该 URL 匹 配 当 前 定义 时 返回 true。 


口 data (可 选 );: HTTP 请 求 的 主体 ， 或 者 是 个 函数 ， 接 受 一 个 data 字 符 串 并 且 在 data 符 合 


预期 时 返回 true ， 或 者 是 一 个 用 JSON 格 式 发 送 HTTP 主 体 的 JavaScript 对 象 。 
口 headers (可 选 )，HTTP 头 。 











AR 
$httpBackend.expectPOST("/vi/api/sign_up", {'userId': 1234}); 


expectPUT( ) 为 PUT 请 求 创建 了 一 个 新 的 请 求 预期 。 它 带 有 三 个 参数 。 


口 url: 一 个 HTTP URL 或 者 接受 URL 的 函数 ， 并 且 该 URL 匹 配 当 前 定义 时 返回 true。 
口 data (可 选 );: HTTP 请 求 的 主体 ， 或 者 是 个 函数 ， 接 受 一 个 data 字 符 串 并 且 在 data 符 合 


预期 时 返回 true ， 或 者 是 一 个 用 JSON 格 式 发 送 HTTP 主 体 的 JavaScript 对 象 。 
口 headers : (可 选 ) HTTP 头 。 











A 
$httpBackend.expectPUT("/vi/api/user/1234", {'name': 'Ari'}); 


expectDELETE( ) 为 DELETE 请 求 创建 了 一 个 新 的 请 求 预期 。 它 带 有 两 个 参数 。 


口 url: 一 个 HTTP URL 或 者 接受 URL 的 函数 ， 并 且 该 URL 匹 配 当 前 定义 时 返回 true。 
口 headers: (可 选 ) HITP 头 。 








RE 
$httpBackend.expectDELETE("/vi/api/user/123") 


3. requestHandler 


我 们 的 expect( ) 方 法 都 会 返回 一 个 requestHandler 对 象 , 带 有 一 个 函数 :respond。respond 
方法 让 我 们 能 给 模拟 的 HTTP 请 求 建立 一 个 响应 。 


requestHandler 的 response 函 数 有 两 种 形式 。 


第 一 种 形式 允许 我 们 设置 响应 代码 、 响 应 数据 、 响 应 头 ， 或 者 全 部 三 项 。 


Ah 
$httpBackend.expectGET("/vi/api/current_user") 

// 响应 一 个 209 状 态 代码 

// 还 有 主体 “success” 

.Tespond(200， 'Success ' ) ; 

// 或 者 只 返回 数据 

.respond("Fail"); 

// 或 者 只 有 请 求 头 

.respond({'X-RESPONSE', 'Failure'}); 
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第 二 种 形式 能 让 我 们 设置 一 个 请 求 处 理 程序 , 请 求 成 功 执 行 之 后 会 执行 它 。 这 种 形式 不 返回 
数据 ， 它 返回 的 是 一 个 函数 ， 能 返回 一 个 包含 响应 状态 代码 、 响 应 数据 和 响应 头 的 数组 。 


AR 
$httpBackend.expectGET("/vi/api/current_user") 
// 响应 一 个 208 状 态 代码 
// 还 有 主体 “success” 
.respond( function(method, url, data, headers) { 
return [260, "DATA", {"header1": "Header1"}]; 


}); 

4. when 

$httpBackend 也 有 when 方 法 ， 与 expect 方 法 不 同 ， 它 压根 就 没有 对 请 求 创 建 预 期 。 实 际 上 ， 
它 的 目的 主要 是 给 应 用 创建 一 个 假 的 后 端 ， 返 回 假 数 据 。 

不 同 于 预期 ,使 用 when( ) 时 , 每 个 匹配 URL 的 请 求 都 会 被 一 条 when 定 义 处 理 。 此 外 ,用 expect 
时 ， 响 应 不 是 必须 的 ， 但 用 when 时 响应 必须 有 。 

如 果 要 建立 对 所 有 测试 通用 的 后 端 定 义 ， 那 么 使 用 wnen( ) 方 法 是 非常 棒 的 。( 例如 ， 当 测试 
一 个 使 用 了 resolve 属 性 的 控制 器 时 ， 它 会 依赖 于 外 部 数据 的 加 载 。) 

when( ) 函数 带 有 两 个 必 选 参数 和 两 个 可 选 参数 。 
口 method: 字符 串 HTTP 方 法 ,就 像 "GET" 或 者 "POST"。 
口 url: 期 望 调用 的 HTTP URL。 
口 gata( 可 选 );: HTTP 请 求 的 主体 ， 或 者 是 个 函数 ， 接 受 一 个 data 字 符 串 并 且 在 data 符 合 
预期 时 返回 true ， 或 者 是 一 个 用 JSON 格 式 发 送 HTTP 主 体 的 JavaScript 对 象 。 
口 headers (可 选 ); HTTP 头 或 者 函数 ， 会 接受 header 对 象 ， 并 且 在 headers 匹 配 预 期 时 返 

回 true。 















































Fe 
$httpBackend .when( 'GET', "/vi/api/current_user") 


// 响应 一 个 200 状 态 代 码 
// 还 有 主体 “success” 
.Tespond(200，'success ' ) ; 


类 似 于 expect 方 法 ,我 们 也 有 同样 的 帮助 方法 让 when 的 使 用 更 具 描 述 性 。 
whenGET( ) 为 GET 方 法 创建 了 一 个 新 的 后 端 定义 ，whenGET( ) 带 有 两 个 参数 。 


Durl: 一 个 HTTP URL。 
口 headers (可 选 ); HTTP 头 。 


$httpBackend.whenGET("/vi/api/current_user") 
.Tespond(200，{userId: 123}); 


whenHEAD( ) 为 HEAD 方 法 创建 了 一 个 新 的 后 端 定义 ，whenHEAD( ) 带 有 两 个 参数 。 


口 url: 一 个 HTTP URL。 
口 headers (可 选 ): HTTP 头 。 














J 
$httpBackend .whenHEAD("/v1i/api/current_user") 
.respond(2080); 
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whenJSONP( ) 为 JSONP 请 求 创建 了 一 个 新 的 后 端 定义 。 它 只 带 有 一 个 参数 。 
D url1: 一 个 HTTP URL。 








Yh ras 


$httpBackend.whenJSONP("/vi/api/current_user") 
.Tespond({userId: 123}); 





whenPOST( ) 为 POST 请 求 创建 了 一 个 新 的 后 端 定义 。 它 带 有 三 个 参数 。 
口 url : 一 个 HTTP URL。 
口 data ( 可 选 ); HTTP 请 求 的 主体 ， 或 者 是 个 函数 ， 接 受 

















个 data 字 符 串 并 且 在 qata 符 合 
预期 时 返回 true ， 或 者 是 一 个 用 JSON 格 式 发 送 HTTP 主 体 的 JavaScript 对 象 。 
口 headers: (可 选 ) HTTP 头 。 


六 


$httpBackend .whenPOST("/vi/api/sign_up", 
{'userIld': 1234}) 
.Tespond(200 ) ; 


whenPUT( ) 为 PUT 请 求 创建 了 一 个 新 的 后 端 定义 。 它 带 有 三 个 
D url1: 一 个 HTTP URL。 





总 


口 data 〈 可 选 : HTTP 请求 的 主体 ， 或 者 是 个 函数 ， 接 受 一 个 data 字 符 串 并 且 在 data 符 合 


预期 时 返回 true ， 或 者 是 一 个 用 JSON 格 式 发 送 HTTP 主 体 的 JavaScript 对 象 。 
口 headers (可 选 ); HITP 头 。 








A 


$httpBackend .whenPUT("/vi/api/user/1234", {'name': 'Ari'}); 


whenDELETE( ) 为 DELETE 请 求 创 建 了 一 个 新 的 后 端 定义 。 它 带 有 两 个 参数 。 
口 url: 一 个 HTTP URL。 

口 headers - (可 选 ) HTTP 头 。 

7 


$httpBackend.whenDELETE("/vtV/api/yuser/123") 
.Tespond(200 ) ; 








19.14 测试 一 个 应 用 


测试 机 制 建立 起 来 之 后 , 就 可 以 开始 测试 应 用 的 不 同 组 件 了 。 模块 中 只 要 包含 了 有 可 能 发 生 
变化 的 逻辑 , 那 这 些 部 分 都 很 适合 测试 。 路 由 是 按照 我 们 期 望 的 那样 运作 的 吗 ? 页 面包 含 指定 内 
容 吗 ? 控制 器 代码 执行 了 吗 ? 








我 们 要 关注 : 测试 应 用 的 不 同 组 件 ， 最 常见 的 测试 应 用 的 地 方 ， 还 有 测试 不 同 组 件 的 经 验 
技巧 。 


我 们 会 测试 应 用 中 的 下 列 组 件 : 
口 路 由 ; 
口 请 求 和 页 面 内 容 ; 
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口 控制 器 ; 

口 服务 与 工厂 ; 
口 过 滤器 ; 

口 模板 和 视图 ; 
口 指令 ; 

口 资源 ; 

口 动画 。 


对 于 每 个 组 件 ， 我 们 会 看 看 测试 的 可 选项 ， 然 后 探讨 如 何 用 可 行 的 方法 来 测试 它们 。 
对 于 多 数 测试 ， 基 准 代码 看 起 来 像 这 样 : 


describe('NAME', function() { 
}); 





19.14.1 测试 路 由 


测试 路 由 时 , 要 建立 一 个 测试 来 确保 应 用 正确 地 把 请 求 导 到 我 们 感 兴趣 的 路 由 去 了 。 我 们 需 
要 检测 路 由 是 否 在 运作 ， 是 否 找 到 了 ,或 者 是 404 了 。 我 们 要 确认 路 由 事件 触发 了 ， 预 期 的 模板 
是 否 真 的 加 载 了 。 

我 们 可 以 使 用 单元 测试 或 者 端 到 端 测试 来 测试 路 由 。 既 然 路 由 会 改变 页 面 的 地 址 (URL ) 和 
页 面 内 容 ， 我 们 需要 检测 路 由 是 否 被 加 载 了 ， 页 面 是 否 找到 了 ， 在 这 中 间 发 生 了 什么 。 

要 测试 这 些 路 由 ， 我 们 假定 建立 了 这 人 么 下 面 一 个 简单 的 路 由 代码 : 


























angular.module('myApp'，['ngRoute ']) 

.config(function($routeProvider) { 
$routeProvider 
.when('/', { 


templateUrl: 'views/main.html', 

controller: 'HomeController'}) 
.when('/login', { 

templateUrl: 'views/login.html', 

controller: 'LoginController'}) 
.otherwise( {redirectTo '/'}); 


}) 

1. 单元 测试 路 由 

为 了 建立 用 于 测试 路 由 代码 的 单元 测试 ， 我 们 需要 做 下 面 几 件 奸 
口 注入 $route 、$location 和 $rootScope 服 务 。 


口 建立 一 个 模拟 的 后 端 来 处 理 XHR ， 获 取 模 板 代 码 。 
口 设置 一 个 地 址 ， 运 行 一 个 $digest 和 后 命 周期 。 


我 们 要 存储 这 三 个 服务 的 一 个 副本 用 于 测试 ( location 、route 和 rootScope )， 这 样 以 后 就 
可 以 在 测试 中 引用 这 些 服务 。 








由 
oO 








describe('Routes test', function() { 
// 在 测试 中 模拟 我 们 的 模块 
beforeEach(module( 'myApp' )); 
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var location, route, rootScope; 
beforeEach( 
inject(_$location_, _$route_, _$rootScope_) { 
location = _$location_; 
route = _$route_; 
rootScope = _$rootScope_; 


} 

// 我 们 的 测试 代码 放 在 这 里 

}); 
既然 已 经 把 服务 注入 到 控制 器 里 了 ， 我 们 来 设置 一 个 模拟 后 端 ， 从 templateUr1 获 取 模 板 。 

可 以 用 $httpBackend 来 创建 断言 来 判断 指定 模板 被 加 载 了 : 





describe('Routes test', function() { 
// 在 测试 中 模拟 模块 
beforeEach(module( 'myApp' )); 


var location, route, rootScope; 
beforeEach(inject( 
function(_$location_, _$route_, _$rootScope_) { 
location = _$location_; 
route = _$route_; 
rootScope = _$rootScope.; 
})); 
describe('index route', function() { 
beforeEach(inject( 
function($httpBackend) { 
$httpBackend .expectGET( 'views/home.html') 
.Tespond(200，'main HTML ' ) ; 
})); 
// 我 们 的 测试 代码 放 在 这 里 
2 
}); 


测试 代码 都 建立 完了 ， 现 在 可 以 开始 写 测试 了 ! 

为 了 用 单元 测试 来 测试 路 由 ， 我 们 需要 模拟 路 由 在 生产 中 的 运作 。 路 由 借助 于 digest 生 命 周 
期 来 运行 ， 当 location 被 设置 以 后 ， 它 使 用 一 个 digest 循 环 周期 来 处 理 路 由 ， 改 变 页 面 内 容 ， 然 
后 结束 本 次 路 由 。 了 解 了 这 些 之 后 ， 我 们 就 需要 解释 测试 中 路 径 的 变更 。 

在 测试 中 ， 我 们 打算 在 应 用 的 index 路 由 上 测试 两 个 状态 。 

口 当 用 户 导 航 到 首页 时 ， 指 定 的 控制 器 会 给 他 们 显示 首页 。 
口 当 用 户 导 航 到 一 个 未 知 路 由 时 ， 他 们 会 按照 在 otherwise 困 数 中 定义 的 那样 被 带 到 首页 。 

我 们 可 以 通过 建立 $location 服 务 来 传递 路 径 的 方式 测试 这 些 条 件 。 为 了 触发 1ocation 请 
求 ， 我 们 要 运行 一 个 digest 周 期 (在 $rootScope 上 )， 然 后 检测 控制 器 是 符合 预期 的 〈 在 本 例 中 ， 


是 “HomeController”)。 






































it('should load the index page on successful load of /', 
function() { 
location.path('/'); 
rootScope.$digest(); // 调用 digest 循 环 
expect(route.current .controller) 
.toBe( 'HomeController') 
}); 
it('should redirect to the index path on non-existent 
route', function() { 
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location.path('/definitely/not/a/_route'); 
rootScope. $digest(); 
expect(route.current.controller) 

.toBe( 'HomeController') 


}); 
要 运行 这 些 测试 ， 需 要 确保 Grunt 服 务 带 在 运行 : 


$ cd myApp 
$ grunt server 


如 果 在 应 用 文件 中 运行 karma start karma.confjs， 能 立刻 在 终端 看 到 输出 ， 如 图 19-3 所 示 。 





A Terminal 





图 19-3 ”单元 测试 路 由 














我 们 做 了 很 多 工作 来 建立 路 由 测试 , 却 只 测试 了 一 个 路 由 地 址 。 既然 我 们 是 为 用 户 功能 测试 

















流程 的 变化 ， 可 以 把 这 些 工作 移 到 应 用 上 ， 在 端 到 端 测 试 中 更 严格 地 测试 它 。 
2. 端 到 端的 路 由 测试 


在 端 到 端 测试 中 ， 无 须 模 拟 Angular 的 任何 部 分 : 我 们 是 在 黑 盒 测试 这 个 应 用 。 用 这 种 方式 ， 


只 需 描述 我 们 想 要 应 用 如 何 表现 ， 并 相应 编写 测试 。 























在 编写 端 到 端 测试 时 , 需要 思考 用 户 是 如 何在 我 们 的 应 用 中 进行 导航 的 。 我们 的 测试 应 当 是 








可 读 的 : 把 用 户 带 到 特定 页 面 ， 描 述 他 们 在 应 用 中 应 当 有 什么 样 的 体验 。 
所 有 端 到 端 测试 的 基准 测试 只 有 下 面 儿 行 : 
describe('E2E: NAME', function() { 
// 我 们 的 测试 代码 放 在 这 里 
I 
就 是 这 样 。 我 们 来 使 用 prowser( ) API 方 法 在 浏览 器 中 修改 iframe 的 源 。 


要 测试 mdex 路 由 ， 我 们 要 把 浏览 器 指向 index 路 由 ， 然 后 确认 地 址 也 真 的 就 在 首页 。 














describe('E2E: Routes'，function() { 
it('should load the index page', function() { 
browser().navigateTo( '/#/"'); 
expect(browser().1location().path()).toBe('/'); 
}); 
3 


要 运行 这 个 测试 ， 需 要 确保 Grunt 服 务 需 在 运行 : 
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$ cd myApp 
$ grunt server 


然后 运行 Karma: 





$ karma start karma-e2e.conf.js 


这 里 ,我们 会 立即 在 终端 中 看 到 输出 。 如 果 测 试 成 功 了 ,能 看 到 它 通过 了 所 有 测试 ， 如 果 没 





有 ， 会 报告 失败 ， 如 图 19-4。 








图 19-4 在 终端 中 端 到 端 测试 路 由 


我 们 也 可 以 用 浏览 器 来 调试 端 到 端 测 试 。 局 动 karma 时 ， 在 后 台 开 了 一 个 浏览 需 。 打 开 这 个 
浏览 絮 ， 点 击 右 上 角 的 debug 按 钮 。 点 击 这 个 按钮 会 打开 一 个 新 页 面 ， 显 示 我 们 所 有 的 测试 ， 包 
一 组 通过 的 测试 和 一 组 没有 通过 的 测试 。 开发 测试 时 , 可 以 把 使 用 浏览 需 作 为 调试 应 用 和 测试 的 








重要 参考 ， 如 图 19-5 所 示 。 





O, O. 
me n ama OVC powen Fm 
AngularyJs: Scenario Test Runner 1 passed OFalures 


cescribe E2E: Routes 


244as » should oad he ndex page 


图 19-5 测试 在 浏览 器 中 的 可 视 化 呈现 


19.14.2 ”测试 页 面 内 容 





测试 时 ,需要 确保 页 面 的 内 容 被 浏览 絮 正 确 泻 染 了 。 我 们 需要 断言 条 内 容 被 发 送 给 浏览 絮 了 ， 











并 且 最 终 展示 给 用 户 了 。 


通过 浏览 器 中 的 单元 测试 , 我 们 无 法 深入 了 解 应 用 状态 , 因为 在 单元 测试 中 不 直接 访问 浏览 


右 的 内 容 。 


我 们 可 以 确认 控制 絮 在 执行 预期 的 功能 ,设置 断言 来 确认 内 容 被 加 载 ,后 面 会 深入 探讨 这 些 。 
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端 到 端 测试 页 面 内 容 


从 另 一 方面 讲 ， 端 到 端 测 试 对 于 为 已 加 载 的 HTML 建 立 预期 来 说 是 很 理想 的 。 利 用 端 到 端 测 
应 用 里 每 个 负责 执行 成 功 浏 览 器 请 求 的 部 分 都 会 被 触发 。 


要 建立 端 到 端的 内 容 测试 ， 我 们 跟 往 常 一 样 建立 测试 : 











试 


describe('E2E: Content', function() { 
}); 


在 这 个 路 由 测试 中 ,我们 将 建立 两 个 场景 : 
口 在 首页 上 ， 有 一 个 指向 登录 路 由 的 链接 ; 
口 可 以 点 击 这 个 链接 ， 然 后 它 会 带 我 们 到 登录 页 面 。 


在 第 一 个 测试 中 , 我 们 只 验证 页 面 上 存在 一 个 登录 按钮 。 我 们 来 建立 一 个 断言 : 有 一 个 登录 
按钮 可 以 单 击 。 


在 index.html 里 ， 假 定 有 如 下 内 容 : 














<div id="authorize"> 


<a id="login" class="radius" href="#/login">Try it! Sign in</a> 
</div> 


在 第 一 个 测试 中 ， 我 们 只 确认 存在 匹配 按钮 上 文字 的 元 素 : 


it('should have a sign up button'，function() { 
browser( ) .navigateTo( '/#/"'); 
expect( 
element("a#login").html() 
).toEqual("Try it! Sign in"); 
1 








现在 , 要 保证 点 击 这 个 链接 能 把 用 户 带 到 登录 页 。 我 们 建立 男 外 一 个 测试 来 断言 如 果 我 们 点 
了 这 个 链接 ， 新 的 地 址 就 是 login 路 由 : 











it('should show login when clicking sign in', function() { 
browser( ) .navigateTo( '/#/"'); 
element("a#login", "Sign in button").click(); 
expect(browser().1location().path()) 
.toBe('/login'); 
有 


最 后 ， 如 果 我 们 要 针对 一 个 用 户 作 测试 的 话 ， 可 以 建立 测试 , 通过 选 出 输入 元 素 , 设置 值 的 
方式 来 填充 登录 表单 ， 如 图 19-6 所 示 。 











it('should be able to fill in the user info', 
function() { 
browser().navigateTo( '/#/'); 
element("a#login", "Sign in button").click(); 
input("user.email").enter("ari@fullstack.io"); 
input("user.password" ) .enter( '123123 ' ) ; 
element( 'form input[type="submit"]').click(); 
expect(browser().1ocation().path()) 
.toBe( '/dashboard ' ) ; 
})3 
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图 19-6 ”内 容 加 载 测试 





19.14.3 ”测试 控制 器 





控制 器 包含 了 应 用 的 业务 逻辑 。 控 制 絮 是 $scope 把 控制 与 视图 关联 起 来 的 地 方 。 既 然 我 们 要 
在 控制 器 中 做 应 用 内 的 多 数 更 新 视图 的 工作 , 那 就 要 建立 测试 来 保证 它们 的 行为 是 按 预 期 执行 的 。 








1. 单元 测试 控制 器 

当 对 控制 器 作 单元 测试 时 ， 需 要 建立 测试 来 模拟 Angular 的 行为 。 
在 建立 单元 测试 的 过 程 中 ， 需 要 确保 : 

口 建立 了 测试 来 模拟 模块 ; 

口 用 一 个 已 知 的 作用 域 实 例 来 存储 控制 需 的 一 个 实例 ; 

口 基于 作用 域 来 测试 我 们 的 预期 。 








要 初始 化 一 个 控制 顺 实 例 ， 需要 使 用 $new( ) 方 法 从 $rootScope 创 建 某 作 用 域 的 一 个 新 实例 。 


这 个 新 实例 会 建立 Angular 在 运行 时 使 用 的 作用 域 继承 。 


有 了 这 个 作用 域 , 就 可 以 初始 化 一 个 新 的 控制 器 , 把 这 个 作用 域 作为 控 


describe( 'Unit controllers: ', function(){ 
// 模拟 myApp 模 块 
beforeEach(module( 'myApp' )); 
describe('FrameController', function() { 
// 局 部 变量 
var FrameController, scope; 
beforeEach(inject( 
function($controller, $rootScope) { 
// 创建 子 作用 域 
scope = $rootScope. $new( ); 
// 创建 FrameController 的 新 实例 
FrameController = $controller('FrameController’', 
{ $scope: scope }); 


})); 

// 我 们 的 测试 代码 放 在 这 里 
> 

上 
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测试 建立 好 了 之 后 , 我们 既 有 了 FrameController 的 一 个 实例 , 也 有 了 这 个 控制 器 的 $scope。 
现在 可 以 用 这 个 scope 来 测试 FrameController 上 的 作用 域 了 。 


在 FrameController 里 , 我 们 有 一 个 时 钟 在 应 用 顶部 显示 当前 时 间 。 我 们 也 可 以 访问 一 个 用 
户 和 他 的 时 区 。 


控制 器 代码 的 相关 部 分 看 起 来 像 这 样 : 


angular .module( 'myApp.controllers', [|]) 
.Controller('FrameController '， 
function($scope, $timeout) { 
$scope.time = { 
today: new Date() 





}; 
$scope.user = { 
timezone: 'US/Pacific' 
} 
var updateClock = function() { 
$scope.time.today = new Date(); 
> 
var tick = function() { 
$timeout(function() { 
$scope.$apply(updateClock ) ; 
tick(); 
},，106060); 


} 
tick(); 


为 了 测试 关注 点 ， 我 们 的 FrameController 已 经 刻意 简化 过 了 。 要 看 到 示例 应 
用 的 完整 测试 套件 ， 可 以 查阅 本 书 附 带 的 代码 。 


我 们 会 测试 控制 如 的 两 个 功能 : 

口 时 间 已 被 定义 ; 

口 用 户 已 被 定义 ， 并 且 有 时 区 。 

// 测试 FrameController 的 值 

it('should have today set', function() { 


expect(scope.time.today).toBeDefined(); 
yy 











it('should have a user set', function() { 
expect(scope.user).toBeDefined(); 

站 

2. 端 到 端 测试 控制 器 

对 控制 器 的 端 到 端 测试 结果 看 上 去 与 测试 页 面 内 容 按 预 期 泻 染 的 结果 很 像 : 我 们 要 测试 控 秆 
咒 里 的 所 有 函数 确实 触发 了 。 

要 测试 页 面 是 不 是 被 泻 染 了 , 可 以 在 浏览 器 中 加 载 相 关 页 面 , 测试 我 们 所 期 待 的 内 容 是 否 在 
视图 中 演 染 了 。 

端 到 端 测试 的 样板 看 起 来 如 下 所 示 : 





人 一 
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describe('E2E controllers: ', function() { 
// 我 们 的 测试 代码 放 在 这 里 
] 入 


测试 建立 好 了 之 后 ， 就 可 以 添加 细则 了 。 我 们 要 测试 日 期 (或 者 至 少 它 的 一 部 分 ) 存在 于 页 
面 上 ， 时 区 也 在 。 
beforeEach(function() { 


browser().navigateTo( '/#/"'); 


下 





it('should have the date in the browser', function() { 
var d = new Date(); 
expect 
element("#time h1").html() 
).toMatch(d.getFullYear()); 
] 


it('should have the user timezone in the header', function() { 
expect 
element( 'header ' ) .html() 
) .toMatch('USVPacific' ) 
] 


想 知道 timeout 函数 在 控制 器 上 被 调用 了 ,也 比较 方便 。 可 以 使 用 Jasmine 帮 助 函 数 createSpy 
来 确认 timeout 确 实 被 调用 了 。 


如 果 修 改 了 beforeEach( ) 函 数 (看 上 面 )， 可 以 在 控制 器 中 包含 $timeout 服 务 。 


var FrameController, scope, timeout; 
beforeEach(inject( 
function($controller, $rootScope) { 
scope = $rootScope. $new( ); 
timeout = jasmine.createSpy('timeout'); 
FrameController = $controller('FrameController', { 
$scope: scope, 
$timeout: timeout 
I 
})); 


现在 ， 在 测试 中 可 以 设置 一 个 预期 : 服务 确实 被 调用 了 : 


it('should set the clock a foot', function() { 
expect(timeout).toHaveBeenCalled(); 


上 








19.14.4 测试 服务 和 工厂 

服务 是 很 容易 测试 的 : 它们 是 独立 的 对 象 ,提供 了 本 地 化 的 功能 。 既 然 它 们 是 单 例 对 象 , 我 
们 可 以 隔离 地 创建 这 些 对 象 ， 测 试 它们 的 行为 。 

1. 单元 测试 服务 

单元 测试 服务 非常 容易 ， 我 们 只 要 把 服务 注入 到 测试 中 就 可 以 了 。 

用 一 个 简单 例子 开始 吧 ， 设 想 我 们 有 一 个 服务 提供 了 版 本 信息 : 
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angular .module( 'myApp.services', [|]) 
.Value('version'，'0.0.1'); 


在 这 个 情况 下 ， 服 务 提 供 了 一 个 字符 串 值 。 我 们 可 以 把 这 个 版 本 服务 注入 到 当前 测试 中 。 
单元 测试 的 样板 看 上 去 像 这 样 : 
describe('Unit: services'，function() { 


beforeEach(module( 'myApp' )); 
1 








OO 到 现在 为 止 ， 我 们 已 经 隐 式 调用 过 $injector 服 务 了 。 本 例 展示 了 如 何 显 式 调 


为 隔离 这 个 测试 ， 我 们 把 它 般 套 在 一 个 describe( ) 块 中 ， 并 且 在 beforeEach( ) 块 中 注入 了 
版 本 服务 。 


describe('version', function() { 
var version; 
beforeEach(inject(function($injector) { 
// 使 用 injector 获 取 版 本 服务 
version = $injector.get('version'); 


})); 





it('should have the version as a service’', 
function() { 
// 设置 对 版 本 服务 的 预期 
expect(version).toEqual('0.0.1'); 
] 
站 5 


正如 我 们 所 看 到 的 ,测试 服务 真是 简单 ， 然 而 ,我 们 的 服务 并 不 总 是 这 么 简单 。 在 示例 应 用 
中 ,我们 跟 googleApi 交 互 ， 这 个 服务 就 有 些 复杂 了 。 


这 是 googleService.googleApi 服 务 的 完整 源码 : 








// google 服 务 模块 
angular.module('googleServices'，[]) 
.factory( 'googleApi '， 
function($window, $document, $q, $rootScope) { 
// 创建 了 一 个 defer 
// 封装 了 我 们 的 Google API 服 务 的 加 载 
var d = $q.defer(); 


// 脚本 被 浏览 器 加 载 之 后 ， 
// 我 们 就 要 调用 这 个 函数 了 ， 
// 它 反 过 来 会 解析 我 们 的 全 局 defer 
$window.bootGoogleApi = function(keys) { 
// 需要 设置 我 们 的 API key 
window.gapi.client.setApiKey(keys.apikKey); 
$rootScope.$apply(function() { 
d.resolve(keys ) ; 
]) 
把 


// 在 浏览 器 中 加 载 客户 端 
var scriptTag = $document [0] .createElement('script'); 
scriptTag.type = 'text/javascript'; 
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scriptTag.async = true; 

scriptTag.src = 
'https://apis.google.com/js/client:plusone.js?onload=onLoadCallback'; 

var s = $qocument [0] .getElementsByTagName( 'body' )[0]; 

s.appendChild(scriptTag); 





// 返回 一 个 单 例 对 象 
// 这 个 对 象 返回 一 个 promise 
return { 
gapi: function() { return d.promise; } 
} 
1 
服务 自身 返回 了 一 个 对 象 ， 包 含 一 个 返回 promise 的 函数 。 这 个 promise 会 在 Google API 被 加 
载 到 页 面 上 并 准备 好 之 后 被 解析 一 次 。 


要 为 这 个 服务 建立 预期 ， 需 要 使 用 Jasmine 的 spyon 方 法 来 在 我 们 调用 的 方法 上 创建 一 个 间 
谍 ， 并 且 建 立 一 个 期 望 : 它 确实 被 调用 了 。 


我 们 会 在 一 个 隔离 的 describe( ) 块 中 建立 对 Google API 的 测试 : 














describe('googleServices', function() { 
var googleApi, resolvedValue; 


beforeEach(inject(function($injector) { 
// 从 我 们 的 服务 中 获取 定义 的 googleApi 
googleApi = $injector.get('googleApi'); 
// 为 gapi 有 函数 创建 一 个 间谍 
// 用 于 告诉 我 们 它 何 时 被 调用 
// 但 不 阻止 真正 的 函数 调用 
spyOn(googleApi, 'gapi') 
.andCallThrough( ); 
// 使 用 真正 函数 的 resolve 
// 来 设置 解析 之 后 的 值 
googleApi .gapi().then(function(keys) { 
resolvedValue = keys; 
}); 
})); 


describe('googleApi', function() { 
// 我 们 的 测试 放 在 这 里 

中 

7 


我 们 也 可 以 使 用 名 称 来 注入 上 面 的 googleApi 服 务 ， 因 为 inject( ) 也 数 使 用 与 $injector 相 
同 的 语法 。 上 面 的 调用 会 变 成 inject(function(googleApi))。 


使 用 andCallThrough() 方 法 ， 我 们 的 测试 就 会 等 到 gapi 对 象 在 window 上 就 绪 。 
可 以 用 一 个 不 同 的 方法 andCallFake( ) 来 给 这 些 请 求 打桩 。 


var q; 
beforeEach(inject(function($injector) { 
// 从 服务 中 获取 预定 义 的 googleApi 
googleApi = $injector.get('googleApi'); 
// 取得 $q 对 象 
q = $injector.get('$q'); 
// 为 gapi 有 函数 创建 一 个 间谍 
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// 并 且 模 拟 真 实 的 响应 
spyOn(googleApi, 'gapi') 
.andCallFake(function() { 
var d = q.defer(); // 模拟 deferred 吕 数 
setTimeout(function() { 
resolvedValue = { 
clientId: '12345"' 


}, 1060); 
return d.promise; 

}); 

// 使 用 真正 函数 的 resolve 

// 来 设置 解析 之 后 的 值 

googleApi.gapi().then(function(keys) { 
resolvedValue = keys; 

})5 

DE 


现在 ， 可 以 用 我 们 的 间谍 来 判断 函数 是 否 确实 被 调用 了 。 

在 这 个 describe() 块 中 的 第 一 个 测试 只 是 简单 地 测试 了 这 个 方法 存在 ， 并 且 是 一 个 函数 。 
如 果 我 们 还 在 用 这 个 API， 并 且 改 变 了 方法 名 或 者 签名 ， 这 个 测试 就 会 很 有 用 。 

我 们 用 Jasmine 帮 助 函 数 waitsFor() 建 立 测试 来 等 待 一 个 promise 的 解析 。 该 函数 带 有 单个 参 
数 : 一 个 函数 ， 对 于 方法 什么 时 候 可 以 继续 ， 提 供 了 值 为 true 或 者 false 的 响应 。 我 们 把 它 设 置 
为 最 多 等 待 .5 秒 : 


describe('googleApi', function() { 
beforeEach(function() { 
// 当 我 们 等 待 
// resolvedValue 被 解析 的 时 候 
// 暂停 本 细则 半 秒 
waitsFor(function() { 
return resolvedValue !== undefined; 
}, 500); 
} 3 








it('should have a gapi function', function() { 
expect( 
typeof(googleApi .gapi) 
) .toEqual(' function'); 
I 


现在 我 们 可 以 为 服务 的 返回 值 设置 预期 并且 断言 它们 等 同 于 我 们 的 设想 : 





it('should call gapi', function() { 
expect(googleApi .gapi .callCount) 
.toEqual(1); 
} 3 


it('should resolve with the browser keys', function() { 
expect(resolvedValue.client1d) 
.toBeDefined( ); 


}); 

2. 端 到 端 测 试 服务 

既然 服务 是 通过 控制 右 与 前 端 交 互 的 , 通过 端 到 端 测试 来 专门 测试 服务 就 不 是 很 有 效 了 。 然 
而 ， 我 们 也 可 以 测试 : 服务 解析 了 它们 的 promise， 并 且 就 是 这 些 结果 填充 了 视图 。 
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例如 ， 可 以 测试 一 个 服务 填充 了 视图 中 的 一 个 事件 列表 。 在 一 个 用 于 显示 事件 列表 的 /events 
页 面 ， 我们 可 以 断言 确实 列 出 了 符合 预期 的 事件 数 : 


beforeEach(function() { 
browser( ) .navigateTo( '/#/events' ) ; 


}); 








it('should show 10 events', function() { 
expect( 
repeater(' .event_listing 1i').count() 
) .toBe(10); 
}); 


19.14.5 ”测试 过 滤器 

过 滤器 很 容易 测试 : 它们 是 隔离 的 功能 。 过 滤器 的 功能 就 是 限制 或 者 改变 输出 ,所 以 我 们 会 
在 过 滤器 函数 的 输出 上 设置 断言 。 

1. 单元 测试 过 滤器 

对 过 滤器 进行 单元 测试 很 简单 。 首 先 ， 要 访问 过 滤器 ， 只 需 简单 地 把 $filter 服 务 注入 到 我 
们 的 测试 中 。 这 样 我 们 就 得 到 了 一 个 在 此 过 程 中 查找 过 滤器 的 途径 : 


describe('Unit: Filter tests', function() { 
var filter; 














// 在 测试 中 模拟 我 们 的 引用 
beforeEach(module( 'myApp' )); 
beforeEach(inject(function($filter) { 
filter = $filter; 
有 
5 


有 了 对 控制 融 的 访问 ， 在 过 滤器 的 输出 上 设置 预期 就 是 很 容易 的 事 了 。 

















it('should give us two decimal points ' ， 
function() { 
expect(filter('number' )(123, 2)).toEqual('123.060'); 


}); 

2. 端 到 端 测 试 过 滤器 

我 们 也 可 以 用 端 到 端 测 试 在 视图 中 测试 过 滤器 的 输出 。 端 到 端 测试 跟 用 于 测试 代码 的 单元 测 
试 略 有 不 同 ， 因 为 我 们 关注 最 终 用 户 看 到 的 东西 ， 更 其 于 关注 过 滤器 函数 的 具体 输出 。 

要 建立 一 个 过 滤器 测试 , 需要 让 浏览 器 加 载 用 于 测试 过 滤器 的 页 面 , 然后 再 跟 过 滤器 自身 打 


交道 : 
例如 ， 给 定 如 下 用 例 ， 有 一 个 对 ng-repeat 的 实时 搜索 : 


<input ng-model="search.$" type="text" placeholder="Search filter" /> 
<table id="emailTable"> 
<tbody> 
<tr ng-repeat="email in emails | filter:search.$"> 
<td>{{ $index + 1 }}</td> 
<td>{{ email.from }}</td> 
<td>{{ email.subject | capitalize }}</td> 
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«</tr> 
</tbody> 
</table> 


我 们 的 emails 数 据 看 起 来 是 下 面 这 样 的 : 
[ 

















{ 


from: 'ari@fullstack.io', 
subject: 'ng-book and things' 


> 
{ 
from: 'ari@fullstack.io', 
subject: 'Other things about ng-book and angular' 
起 
{ 


from: 'ted@google.com', 
subject: 'Conference speaking gig' 
} 
] . 


在 此 ， 我 们 要 测试 两 个 过 滤器 : 在 ng-repeat 上 设置 了 预期 的 那个 实时 搜索 过 滤器 ， 以 及 在 
subject 上 的 (确保 它 是 大 写 的 ) 过 滤器 。 

要 确保 实时 搜索 是 起 作用 的 , 需要 在 输入 字段 中 输入 一 个 值 , 并 且 确 保 这 个 字段 按照 我 们 的 
预期 来 变化 。 


it('should filter on the search', function() { 
expect(repeater('#emailTable tbody tr')).count() 
.toBe(3); 
// things 过 滤 出 email 中 的 两 条 数据 
input('search.$').enter('things'); 
expect(repeater('#emailTable tbody tr')).count() 
.toBe(2); 





} 
可 以 看 到 当 给 search.$ 字 段 设置 了 不 同 输入 时 ，ng-repeat 从 3 变 成 了 2。 
也 可 以 测试 我 们 自己 的 过 滤器 〈 大 写 过 滤器 )， 确 保 它 是 按照 预期 方式 工作 的 : 





it('should capitalize the subject line', function() { 
expect( 
Tepeater( '#emailTable tbody tr:first') 
column('email.subject') 
) .toEqual(["Ng-book and things"]); 
站 


19.14.6 ”测试 模板 
测试 异 板 时 , 我 们 着 重 于 确保 : 特定 的 内 容 模板 被 加 载 了 , 模板 中 特定 的 数据 也 在 视图 中 显示 了 。 
1. 单元 测试 模板 
既然 模板 是 直接 绑 定 到 视图 的 , 那么 在 视图 中 对 组 件 的 单元 测试 也 就 没有 什么 意义 了 : 我 们 
断言 的 建立 基础 是 ， 视 图 的 创建 依赖 于 多 个 组 件 的 完成 。 
可 以 建立 一 个 断言 : 模板 正常 加 载 了 。 要 做 到 这 个 , 需要 建立 测试 来 期 望 对 主页 模板 的 一 个 
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请 求 ， 并 且 据 行 一 个 视图 的 变更 来 验证 它 是 不 是 真 的 加 载 了 。 





describe('Unit: Templates', function() { 
var $httpBackend, 
location, 
route, 
rootScope; 


beforeEach(module( 'myApp' )); 
beforeEach(inject( 


function(_$rootScope_, _$route_, _$httpBackend_, _$location_){ 


location = _$location_; 
rootScope = _$rootScope_; 
route = _$route_; 


$httpBackend = _$httpBackend_; 
})); 


afterEach(function() { 
$httpBackend.verifyNoOutstandingExpectation(); 
$httpBackend .verifyNoOutstandingRequest(); 


} 3 


// 我 们 的 测试 代码 放 在 这 里 
] ) ; 


现在 ， 可 以 建立 测试 来 反映 导航 到 应 用 不 同 部 分 时 的 预期 。 


it('loads the home template at /', function() { 
$httpBackend .expectGET( 'templates/home.html') 
.respond(200); 
location.path('/'); 
rootScope.$digest(); // 调用 digest 循 环 
$httpBackend. flush(); 
}); 








it('loads the dashboard template at /dashboard', function() { 
$httpBackend.expectGET( 'templates/dashboard.html') 
.Tespond(200) ; 
location.path('/dashboard'); 
rootScope.$qigest(); // 调用 qigest 循 环 
$httpBackend. flush( ) 
}); 

















注意 ,我 们 并 未 在 测试 中 返回 一 个 模板 ( 是 .respond(260) ,而 不 是 .respond(288,"\xdiv\> 
\</div\，") )。 鉴 于 我 们 只 是 在 验证 模板 是 否 在 请 求 中 加 载 了 ,没有 必要 担心 到 底 显 示 了 什么 。 

端 到 端 测试 才 是 我 们 要 验证 视图 外 观 是 否 与 预期 相符 的 地 方 。 

2. 端 到 端 测 试 模板 

当 在 端 到 端 测试 中 测试 视图 时 , 相 比 模板 是 否 加 载 了 , 我 们 更 加 关注 视图 上 加 载 的 真实 数据 。 
通过 这 些 测试 ， 我 们 能 够 更 好 地 了 解 用 户 在 视图 加 载 时 看 到 的 实际 内 容 。 

当 它 在 用 户 的 视图 中 时 ， 我 们 将 测试 视图 的 内 容 。 

为 了 测试 模板 ， 我 们 将 测试 视图 包含 了 期 望 的 HTML， 还 有 它 并 未 加 载 应 用 的 其 他 部 分 。 


describe('E2E: Views', function() { 
beforeEach(function() { 
browser().navigateTo( '#/' ); 
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it('should load the home template', function() 


expect( 
element( '#emailTable' ).html() 
) .toContain('tbodqdy ' ) ; 
上 


it('should not load the dashboard template ' ， 
function() { 
expect( 
element('#dashboard' ) .count() 
) .toBe(0); 
上 
所 


对 视图 模板 创建 断言 很 简单 。 


19.14.7 ”测试 指令 

指令 是 Angular 工 作 流程 的 根本 。 鉴 于 我 们 在 Angular 应 用 中 做 的 绝 大 部 分 操作 都 是 基于 指令 
运作 的 ， 测 试 指令 功能 是 最 重要 的 组 件 测试 之 一 ， 尤 其 是 创建 较 大 的 组 件 时 。 

测试 指令 时 ， 我 们 希望 测试 指令 确实 被 加 载 到 视图 上 了 ， 并 日 也 是 按照 我 们 期 待 它 在 DOM 
里 $scope 上 的 行为 来 运行 的 。 

单元 测试 主要 测试 指令 的 功能 ， 而 在 端 到 端 测试 里 ， 可 以 检验 是 否 在 正确 地 使 用 指令 。 

1. 单元 测试 指令 

单元 测试 指令 需要 建立 一 个 测试 来 确保 指令 按照 我 们 期 望 的 那样 来 渲染 。 我 们 会 要 设置 预 
期 : 绑 定 被 正确 建立 了 ， 错 误 按 照 期 望 的 方式 抛 出 了 ， 视 图 按照 预期 显示 了 整个 指令 。 

在 这 个 测试 里 ， 我 们 会 跟 下 面 的 指令 打交道 : 









































angular .module( 'myApp ' ) 
.directive('notification', function($timeout) { 
var html = '<div class="notification">' + 
‘<div class="notification-content">' + 
'<p>{{ message }}¢</p>' + 
‘</div>' + 
'</div>'; 
return { 
restrict: 'A', 
scope: { message: '=' }, 
template: html, 
replace: true, 
link: function(scope, ele, attrs) { 
scope.$watch('message', function(n, o) { 
if (n) 
$timeout(function() { 
ele.addClass( 'ng-hide'); 
},，2000); 
}); 
}}}); 


为 了 单元 测试 指令 , 我 们 需要 把 它们 暴露 到 视图 中 。 与 测试 控制 咒 类 似 ,， 我 们 需要 手动 把 指 
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令 放 到 一 个 待 创建 的 元 素 中 ( 在 某 种 意义 上 与 Angular 第 一 次 放置 指令 类 似 )。 








describe('Unit: Directives', function() { 
var ele, scope; 
// 加 载 应 用 
beforeEach(module( 'myApp' )); 
// 我 们 的 测试 代码 放 在 这 里 

上 


现在 , 为 了 把 指令 加 载 到 视图 中 , 我 们 需要 编译 HTML 内 容 , 并 且 实 施 绑 定 , 在 生产 中 Angular 
会 自动 帮 我 们 做 这 些 


describe('Un 让 : Directives', function() { 
var ele, scope; 
// 加 载 应 用 
beforeEach(module('myApp ' ) ) ; 
beforeEach(inject(function($compile, $rootScope) { 
scope = $rootScope; 
ele = angular.element( 
"<dqiv notification message="note"></div>' 








) ; 
$compile(ele)(scope); 
scope. $apply(); 

19); 


// 我 们 的 测试 代码 放 在 这 里 
}); 
注意 ， 我 们 在 创建 一 个 元 素 ， 这 个 元 素 调用 了 指令 ， 就 像 我 们 直接 把 它 放 在 DOM 里 那样 。 
然后 ， 需 要 编译 这 个 元 素 ， 运 行 digest 循 环 把 它 放 在 我 们 的 假 DOM 上 并 且 生 效 。 


要 测试 这 个 指令 ， 要 做 的 就 是 与 它 交互 ， 就 好 像 它 是 在 我 们 的 DOM 中 一 样 。 为 了 使 指令 上 
的 绑 定 产生 变化 ， 需 要 强制 运行 一 个 digest 循 环 。 


在 指令 中 ， 我 们 添加 了 一 个 到 scope 的 message 属 性 的 绑 定 ， 所 以 当 我 们 改变 它 时 ， 需 要 在 
$apply() 中 调用 : 


Ap 测试 应 用 
it('should display the welcome text', function() { 
scope.$apply(function() { 
scope.note = "Notification message"; 























}); 


expect( 
ele.html() 
) .toContain("Notification message"); 


}); 


那么 ， 不 直接 把 HTML 艇 人 到 指令 的 定义 中 ， 而 是 使 用 emplateUr1 选 项 来 测试 指令 ， 又 会 
怎样 呢 ? 在 单元 测试 中 , 我 们 并 不 想 建 立 真正 的 XHR 请 求 来 获取 远程 的 模板 。( Angular 也 根本 就 
没有 一 个 用 于 在 测试 中 获取 远程 服务 的 方法 。) 建立 真正 的 XHR 请 求 会 减 慢 我 们 的 单元 测试 ， 并 
且 让 单元 测试 依赖 于 外 部 数据 。 如 果 外 部 数据 源 介 入 。 测试 功能 , 我 们 就 没 法 知道 测试 在 哪 出 错 
了 。 是 外 部 数据 源 出 错 了 吗 ? 还 是 我 们 的 功能 出 错 了 

既然 我 们 知道 了 XHR 测 试 不 能 建立 请 求 , 一 切 需 要 通过 templateUr1 从 远程 地 址 加 载 模板 的 指 
令 都 会 失败 ， 除 非 在 开始 测试 指令 之 前 就 先 处 理 请 求 。 幸 好 ，Angular 包 含 了 $templateCache 服 务 。 
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$templateCache 服 务 允 许 $http 服 务 缓存 经 过 XHR 的 模板 请 求 ， 这 样 它 们 就 只 会 被 请 求 一 
次 。 当 一 个 模板 被 取 到 了 ， 它 的 内 容 就 会 存储 在 $templateCache 中 ， 用 模板 路 径 作 键 。 例 如 ， 
当 获 取 下 面 的 实例 指令 时 ， 它 会 请 求 templateUr1 并 且 把 模板 的 内 容 放 在 $templateCache 中 : 








angular .module(l 'myApp') 
.directive( 'notification', function($timeout) { 


return { 
restrict: 'A', 
scope: { ngModel: '=' }, 


templateUrl: 'views/templates/notification.html', 
六 
$templateCache 会 把 这 个 模板 的 内 容 保 持 在 $templateCache('views/templates/ 
notification.html' ) 中 。 如 果 已 经 预先 在 $templateCache 中 存放 了 测试 所 需 的 指令 文件 内 容 ， 
就 可 以 使 用 $templateCache 来 阻止 在 指令 的 单元 测试 中 再 产生 请 求 。 


可 以 使 用 优秀 的 karma-ng-htm12js-preprocessor 包 来 把 模板 转换 成 可 在 测试 中 使 用 的 
Angular 模 块 。 


karma-ng-html2js-preprocessor 
首先 ， 需 要 安装 包 : 
$ npm install --save-dev karma-ng-htm12js-preprocessor 


做 好 之 后 ， 需 要 修改 karma .conf. js 来 使 用 htm12js 预 处 理 器 。 我 们 需要 在 preprocessors 
数组 中 添加 ntm12js 预 处 理 器 : 


preprocessors: { 

'app/views/**/*.html': ['ng-html2js'] 
}, 
LY 


为 了 让 所 有 模板 都 被 karma 加 载 ， 需 要 设置 files 数 组 来 加 载 模板 。 例 如 ， 如 果 模 板 放 在 
app/View/ 下 面 ， 可 以 把 这 段 加 到 files 数 组 中 以 加 载 它们 (根据 具体 项 目 来 修改 这 个 路 径 ): 


files: [ 
'app/bower_components/angular/angular.js', 
A dss 
'app/views/**/*.html', 
'app/scripts/*.js', 
A ie 

















] 


围绕 预 处 理 恬 ,需要 加 一 些 配置 。 我 们 会 要 创建 用 于 注入 到 测试 中 的 模块 。 此 外 ， 也 会 要 把 
模板 的 cacheId 设 置 为 模板 路 由 的 真实 文件 路 径 。ng-htm12js 包 人 允许 我 们 为 每 个 模板 定义 它 ， 它 
存放 在 files 数 组 中 。 


如 果 我 们 从 指令 中 获取 模板 ,很 可 能 不 是 指向 app/ 路 径 的 ( 可 以 是 相对 于 app/ 目 录 的 )。 在 这 
些 情况 下 ,我们 会 从 这 个 路 径 剥 离 路 径 ,这样 就 可 以 引用 这 个 URL， 因 为 它 已 经 被 指令 自己 请 求 
过 了 。 配 置 可 能 看 上 去 像 下 面 这 样 : 

PS 


ngHtml2JsPreprocessor: { 
moduleName: 'templates', 
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cacheIdFromPath: function(filepath) { 
return 'app/views/' + filepath; 





}, 
stripPrefix: 'app/' 
和 
在 我 们 的 测试 里 ， 可 以 接着 把 templates 模 块 注入 到 测试 中 : 


describe('Directive: myDirective', function () { 


// 加 载 指 令 的 模块 
beforeEach(module( 'myApp' )); 
beforeEach(module( 'templates' )); 


templates 模 块 注入 到 测试 中 之 后 ， 模 板 就 已 经 通过 templateUr1 加 载 到 指令 中 去 了 。 因 为 
模板 会 被 自动 加 载 ， 无 需 再 做 什么 来 测试 党 有 templateUr1 的 指令 。 

2. 端 到 端 测 试 指令 

当 对 指令 进行 端 到 端 测试 时 , 我 们 主要 关心 的 并 不 是 指令 的 功能 : 我 们 测试 的 是 在 一 个 全 局 
视图 里 ， 用 户 看 到 了 什么 ， 做 了 什么 。 

既然 只 是 在 测试 视图 ， 指 令 的 端 到 端 测 试看 上 去 跟 测试 模板 差不多 。 














describe('E2E: directives', function() { 


beforeEach(function() { 
browser().navigateTo( '/'); 


}); 


it('should have the welcome message', function() { 
expect( 
element('.notification', 'Notification').html() 
) .toContain( 'Notification message'); 
2 
] 


19.15 ”测试 事件 

在 应 用 中 使 用 事件 ， 尤 其 是 那些 导致 DOM 产 生 交 互 的 事件 时 ， 我 们 要 建立 测试 来 保证 真实 
的 事件 被 触发 了 ， 它 也 得 到 了 期 待 的 事件 数据 。 

我 们 也 想 建 立 测 试 来 为 在 浏览 器 中 捕获 事件 设置 预期 , 想 看 看 我 们 对 事件 的 交互 是 否 产 生 了 
期 望 的 响应 。 

1. 单元 测试 事件 

当 对 事件 的 触发 进行 单元 测试 时 , 我 们 感 兴趣 的 是 它们 究竟 调用 了 什么 , 还 有 是 否 真 的 调用 
了 正确 的 事件 。 其 次 ， 我 们 主要 关心 处 理 程序 有 它们 需要 的 数据 。 


使 用 Jasmine 的 辅助 方法 spnon( ) 可 以 非常 容易 地 建立 事件 测试 。 
设想 我 们 在 测试 一 个 控制 器 ， 它 触发 了 一 个 $emit 函 数 。 基 于 这 个 函数 ， 我 们 可 以 建立 一 个 
预期 : 事件 被 触发 了 ， 并且 用 我 们 所 感 兴趣 的 任意 参数 调用 了 。 
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首先 ， 跟 往常 一 样 ， 需 要 建立 测试 ， 这 样 我 们 可 以 访问 控制 器 的 作用 域 : 


describe('myApp'，function() { 
var scope 
beforeEach(angular .mock.module('myApp ' )); 
beforeEach(angular .mock.inject(function($rootScope) { 
scope = $rootScope.$new() ; 
}); 
}); 


测试 建 好 之 后 ， 就 可 以 简单 地 在 作用 域 上 为 $emit 或 者 $broadcase 事 件 设置 一 个 spyon( ) 调 
用 了 。 


/Ys es 
上 
it('should have emit called', function() { 
spyOn(scope, "$emit"); 
scope.closePanel(); // 示例 
// 或 者 任意 可 能 导致 emit 被 调用 的 事件 
expect(scope.$emit) 
.toHaveBeenCalledWith("panel:closed", 
panel .ig); 














} 


我 们 也 可 以 测试 事件 : 设置 一 个 事件 触发 后 调用 的 $on( ) 监听 器 。 要 执行 $broadcast 方 法 ， 
可 以 简单 地 在 作用 域 上 调用 $broadcast ， 并 且 对 事件 将 会 导致 的 作用 域 变 化 建立 一 个 预期 。 


yo 
it('should set the panel to closed state', 
function() { 
scope.$broadcast("panel:closed", 1); 
expect(scope.panel .state).toEqual("closed"); 














有 
2. 端 到 端 测 试 事件 


要 对 事件 调用 进行 端 到 端 测试 十 分 简单 : 只 要 简单 地 测试 事件 产生 的 功能 是 按照 我 们 的 预期 
来 触发 的 。 











19.16 对 Angular 的 持续 集成 
Angular 的 Karma 与 持续 集成 服务 协作 得 很 好 。 持 续集 成 服务 ， 或 者 简称 为 CI， 给 了 我 们 的 应 
用 一 个 开发 的 入 口 ， 让 我 们 对 每 次 提交 的 代码 能 按照 预期 运行 有 信心 。 


持续 集成 服务 器 在 全 世界 大 小 公司 和 开发 人 员 中 广泛 使 用 , 学 习 如 何 建立 它们 会 是 一 个 不 错 
的 主意 。JenkinsCI 和 TravisCI2 都 能 很 容易 跟 Karma 集 成 ， 我 们 强烈 推荐 读者 使 用 它们 。 

















19.17 Protractor 
新 的 端 到 端 测试 框架 称 为 Protractor， 它 将 会 最 终 取代 当前 框架 ， 成 为 默认 的 框架 。 











GD http://jenkins-ci.org 


© travis-ci.org 


图 灵 社 区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 





19.17 Protractor 271 





不 像 Angular 场 景 运行 器 ，Protractor 是 建立 在 WebDriver" 上 的 ， 它 是 一 种 作为 扩展 编写 的 、 
用 于 控制 浏览 如 的 API。 


WebDriver 拥 有 IE 、Chrome 、Safari、Firefox 等 浏览 器 的 控制 器 扩展 ， 给 我 们 提供 了 更 多 选择 
以 及 大 量 测试 用 的 浏览 老 。 这 有 很 多 好 处 ， 包 括 更 稳定 、 更 快捷 。 


Protractor 就 像 Angular 场 景 运行 器 那样 ， 把 实现 Jasmine 作 为 自己 的 测试 平台 ， 所 以 我 们 无 需 
为 了 用 它 而 学 习 一 个 全 新 的 测试 框架 。 


分 度 器 自身 可 以 被 安装 为 独立 的 运行 器 ， 也 可 以 当做 一 个 库 骨 入 到 我 们 的 测试 中 。 











安装 
可 以 使 用 npm 来 安装 Protractor: 


$ npm install -g protractor 
OO -9 参数 告诉 npm 全 局 安装 protrator。 
不 像 Angular 场 景 运行 器 那样 , Protractor 需 要 一 个 独立 的 服务 需 运 行 在 http:/location:4444 ( 这 
个 位 置 可 以 配置 )。 
笠 运 的 是 ，Protractor 自 带 了 一 个 工具 ， 简 化 了 Selenium 服 务 需 的 安装 。 
为 了 访问 脚本 ， 我 们 需要 把 Protractor 安 装 在 待 测试 的 Angular 应 用 的 顶级 目录 。 


$ npm install protractor 


然后 运行 本 地 node module/ 目 录 下 的 Seleniun 安 装 脚 本 : 


一 


























$ ./node_modules/protractor/bin/webdriver-manager update --chrome 


这 个 脚本 会 下 载运 行 Selenuim 所 需 的 文件 ， 并 且 用 它们 创建 一 个 启动 脚本 和 一 个 目录 ， 如 图 
19-7 所 示 。 











图 19-7 安装 Selenium 





QD https://code.google.com/p/selenium/wiki/WebDriverJS 
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个 脚本 完成 时 ， 就 可 以 执行 这 个 启动 脚本 ,用 Chrome 驱 动 来 启动 Selenuim 的 独立 版 本 ， 如 
图 19-8 所 示 。 


$ ./node_modules/protractor/bin/webdriver-manager start 


ane 





图 19-8 安装 Selenium 


如 果 在 安装 Selenuim 的 过 程 中 出 现 问 题 ， 试 试 从 http://chromedriver.storage. 
googleapis.com/index.html 下 载 并 更 新 最 新 版 本 的 ChromeDriver。 


现在 就 可 以 用 Protractor 来 连接 在 后 台 运 行 的 Selenuim 服 务 器 了 。 


19.18 配置 


就 像 Karma 一 样 ，Protractor 需 要 运行 一 个 配置 脚本 来 告诉 Protractor 运 行 器 如 何 连 接 到 
Selenuim， 用 哪个 (哪些 ) 浏览 句 ， 以 及 这 些 测试 文件 在 哪里 。 


创建 配置 文件 最 简单 的 方式 是 从 Protractor 的 安装 中 复制 一 个 基准 配置 文件 : 














$ cp ./node_modules/protractor/example/chromeOnlyConf.js protractor_conf.js 


为 了 让 Protractor 能 运行 ， 需 要 对 这 个 脚本 作 一 些 修改 。 首 先 ， 默认 配置 脚本 使 用 的 Chrome 
驱动 并 不 在 我 们 的 当前 目录 。 我 们 需要 把 它 指向 本 地 ./node_modules 目 录 下 的 ChromeDriver。 


chromeDriver: './node_modules/protractor/selenium/chromedriver', 
然后 ， 需 要 把 specs 数 组 指向 我 们 的 本 地 测试 。 


specs: ['test/e2e/**/*_spec.js'], 


运行 
我 们 有 两 个 选项 可 以 用 来 运行 Protractor 测 试 ， 第 一 个 就 是 当 运 行 Protractor 时 ， 使 用 


Protractor 来 启动 Selenium。 这 个 选项 叫做 独立 模式 。 我 们 复制 的 这 个 示例 Protractor 配 置 文件 包 
含 了 这 个 设置 。 





chromeOnly: true, 
chromeDriver: './node_modules/protractor/selenium/chromedriver', 
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运行 Protractor 测 试 的 第 二 个 方法 是 连接 到 一 个 单独 运行 的 Selenuim 服 务 器 。 当 我 们 的 测试 变 
得 更 复杂 时 ， 会 更 希望 在 一 个 独立 的 Selenium 服 务 器 上 运行 我 们 的 测试 。 


要 把 Protractor 配 置 成 使 用 这 个 独立 的 服务 器 ， 需 要 删除 前 面 两 个 选项 (chromeonly 和 
chromeDriver )， 并 有 晶 添 加 seleniumAddress 选 项 ， 指 向 运行 的 Selenium 服 务 器 。 





seleniumAddress: 'http://0.060.0.0:4444/wd/hub', 


19.19 配置 选项 
Protractor 包 含 了 多 个 选项 ， 能 让 我 们 配置 如 何 用 我 们 的 细则 文件 来 运行 Protractor。 


1. seleniumServerJar (字符 串 ) 


把 seleniumServerJar 设置 成 独立 Selenium 服 务 圳 的 路 径 ， 我 们 可 以 在 运行 测试 时 让 
Protractor 启 动 Selenium 服 务 器 。 


当 我 们 运行 持续 集成 (CI ) 测试 时 ， 这 个 设置 很 有 用 ， 但 是 Selenium 的 启动 会 很 慢 ， 所 以 不 
太 适 合 


2. seleniumPort (整数 ) 


启动 Seleni um 服务 咽 的 端口 ， 如 果 Protractor 要 启动 服务 姨 的 话 。 











3. chromeDriver (字符 串 ) 


当 启 动 Selenium 服 务 器 时 ， 作 为 webdriver .chrome .driver 启 动 的 ChromeDriver 路 径 。 如 果 
这 个 变量 为 nul1 ，Protractor 会 尝试 从 PATH 环境 变量 中 寻找 ChromeDriver。 


4. seleniumArgs 〈 数 组 ) 
这 个 数组 中 的 字符 串 是 我 们 可 以 在 启动 时 手动 传递 给 Selenium 服 务 器 的 附加 参数 。 





5. sauceUser / sauceKkey (字符 串 ) 


如 果 设 置 了 sauceUser 和 sauceKey , Selenium 就 不 会 启动 , 测试 会 在 云 测试 服务 SauceLabs" 上 
远程 运行 
6. 





seleniumAddress (字符 串 ) 


如 果 我 们 运行 自己 的 服务 器 ， 个 学 待遇 是 运行 中 的 Selenium 服 务 需 的 地 址 。 例 如 ， 如 果 我 
们 用 包含 的 脚本 启动 了 i 这 个 字符 串 就 会 被 设置 成 : http://localhost:4444/wd/hub 。 


7. allScriptsTimeout (整数 ) 


这 个 整数 是 每 个 脚本 在 浏览 器 中 运行 的 超时 时 间 。 就 是 说 , 如 果 一 个 脚本 运行 了 超过 这 个 时 
间 还 没完 成 ， 就 会 被 杀 掉 ， 然 后 报告 为 失败 。 


8. specs 〈 数 组 ) 
个 字符 串 数 组 是 要 运行 的 细则 的 地 址 。 它 们 可 以 是 相对 的 、 绝 对 的 文件 路 径 ， 或 者 是 待 匹 






























































人 https://saucelabs.com/ 
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配 的 模式 。 
specs: [ 
'spec/*_spec.js', 
], 
9. capabilities (对 象 ) 
这 个 对 象 包含 了 要 传递 给 webdriver 实 例 的 兼容 性 键 - 值 对 。 
capabilities: { 
"browseTrName ' : "chrome ' 
} 
10. baseUrl (字符 串 ) 
这 个 字符 串 是 应 用 的 基准 URL。 如 果 我 们 的 测试 使 用 了 相对 路 径 , 这 些 路 径 就 会 被 追加 到 这 
个 字符 串 之 后 。 


baseUr1: 'http://localhost:9000' 








11. rootElement 《字符 串 ) 

这 个 字符 串 是 Angular 应 用 寄生 元 素 的 选择 器 。 默 认为 body ， 但 如 果 我 们 的 Angular 应 用 包含 
在 <bodqy> 元 素 的 下 级 节点 中 ， 就 需要 包含 这 个 选项 。 

12. onPrepare (字符 串 /函数 ) 

在 Protractor 被 启动 并 准备 运行 之 后 , 所 有 细则 被 执行 之 前 ,这 个 函数 会 运行 。 它 也 可 以 是 一 个 
要 在 细则 执行 前 运行 的 包含 了 代码 的 文件 ,onPrepare 选 项 对 于 建立 Jasmine 报 表 是 很 有 用 的 , 例如 : 








onPrepare: function() { 
// 例如 ， 添加 一 个 Jasmine 报 表 : 
jasmine.getEnv() 
.addReporter(new jasmine.JUnitXmlReporter( 
'outputdir/', true, true) 
好 
】 


13. params (对 象 ) 
params 对 象 会 被 直接 传递 给 Protractor 实 例 , 可 以 在 我 们 的 测试 中 访问 这 个 对 象 。 可 以 在 这 个 
params 对 象 中 存放 任意 值 。 





params: { 
env: “test 


} 

14. jasmineNodeOpts 《对 象 ) 

jasmineNodeOpts 指 定 了 传递 给 JasmineNode 实 例 的 选项 ,jasmineNodeOpts 的 完整 选项 可 以 
在 https://github.com/juliemr/minijasminenode 上 找到 。 


一 个 完整 的 配置 文件 示例 可 能 是 这 样 的 : 





exports .config = { 
capabilities: { 
"browserName ' : “chrome 
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}; 





seleniumAddress: 'http://localhost:4444/wd/hub', 
baseUr1: "http://localhost:9000 ' ， 
specs: ['test/protractor/**/*.js'], 
jasmineNodeOpts: { 

showColors: true, 

defaultTimeoutIinterval: 30000 


下 
] 


19.20 ”编写 测试 


当 用 Protractor 开 始 测试 时 ,我 们 通过 Jasmine 来 设置 测试 。 也 就 是 说 ,我 们 只 是 像 编 写 Karma 
测试 那样 来 编写 测试 。 例 如 ， 一 个 简单 的 Protractor 测 试 设置 可 能 是 这 样 的 : 




















describe( 'homepage', function() { 
beforeEach(function() { 
// 函数 执行 之 前 
上 


it('should load the page', function() { 
// 将 测试 代码 放 在 这 里 
expect(...).toEqual('hello'); 
}); 
| 
尽管 上 面 测试 的 内 容 还 没 写 完 ， 但 结构 很 熟悉 了 : 它 是 用 Jasmine 建 立 的 。 我 们 使 用 
beforeEach( ) 和 afterEach( ) 函数 以 及 山 套 的 describe( ) 块 作为 测试 的 结构 。 


要 真正 实现 测试 ， 使 用 Jasmine 给 予 我 们 的 同样 的 expect( ) 语 法 。 


编写 Protractor 测 试 需要 我 们 在 测试 中 跟 Protractor 暴 露 的 一 些 全 局 变量 打交道 。 下 面 列 出 了 这 
些 全 局 变量 : 


























1. browser 


browser 变 量 是 围绕 webdriver 实 例 的 一 个 包装 。 我 们 使 用 browser 变 量 来 做 各 种 导航 ,或 者 
是 从 页 面 上 抓 取 任 意 信息 。 


可 以 使 用 browser 变 量 的 get( ) 函数 来 导航 到 一 个 页 面 : 


beforeEach(function() { 
browser .get('http://127.06.0.1:9000/'); 
}); 
可 以 用 browser 对 象 来 玩 一 些 妙 招 。 例 如 ， 可 以 用 browser 对 象 上 的 debugger( ) 方 法 来 调试 
页 面 。 


it('should find title element', function() { 
browser .get('app/index.html' ); 




















browser .debugger( ); 
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element(by.binding( 'user .name' )); 


二 
要 把 这 个 测试 丢 到 node 调 试 需 里 运行 ， 可 以 在 调试 模式 下 运行 测试 : 

















$ protractor debug conf.js 

在 调试 模式 下 运行 Protractor 时 , 我 们 得 到 的 好 处 是 让 浏览 右 的 执行 停止 , 而且 Protractor 提 供 
的 每 个 客户 端 脚本 在 控制 台中 都 可 用 。 

要 对 Protractor 的 客户 端 脚本 进行 访问 ， 我 们 可 以 用 Protractor 搬 入 的 window.clientSideScripts 
对 象 来 调用 它们 。 

2. element 

element 函数 帮助 我 们 找到 正在 测试 的 页 面 上 的 元 素 ， 并 且 与 它们 交互 。 

记 住 ，element 的 返回 值 并 不 是 一 个 DOM 元 素 ， 它 是 ElementFinder 的 一 个 实例 ， 


ElementFinder 是 一 个 通过 webdriver 运 作 的 对 象 。 可 以 用 这 个 对 象 的 方法 , 如 sendkeys 和 click ， 
来 跟 页 面 上 的 对 象 交 互 。 


完整 的 API 太 多 了 ， 更 多 的 文档 可 以 在 Github 上 的 文档 页 找到 : https://github.com/angular/ 


protractor/blob/master/docs/api.md 

















3. by 

这 个 选项 是 元 素 定 位 策略 的 集合 。 可 以 通过 CSS 选 择 器 、ID 或 者 甚至 绑 定 了 ng-model 的 属性 
用 它 来 查找 元 素 。 

by.binding ”利用 这 个 选项 能 可 以 查找 使 用 ng-bind 或 者 模板 标记 {{ }} 绑 定 的 元 素 ， 比 如 : 

<h2 ng-bind="person.name"> </h2> 


我 们 可 以 在 测试 中 使 用 下 面 这 名 来 定位 ch2> 元 素 : 
































element(by.binding( 'person.name' )) 

by .model 可 以 使 用 by .model 来 搜索 使 用 ng-mode1 绑 定 的 输入 元 素 ， 比 如 : 
<div my-directive ng-model="user.name"> </div> 

可 以 使 用 这 句 来 定位 cdiv> 指 令 : 

element(by.model('user .name' )) 

by .repeater 可 以 搜索 包含 了 ng-repeat 指 令 的 元 素 。 


比如 ， 如 果 我 们 在 一 个 ng-repeat 中 循环 一 个 用 户 列表 : 








<Ul> 
《li ng-repeat="user in users"></1i> 
</ul> 


可 以 定位 cl1i> 指 令 ， 用 下 面 的 方式 使 用 by .repeater 来 获取 一 个 行 的 列表 : 





element.all(by.repeater('user in users')) 
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by.id by.id 使 我 们 能 够 通过 CSS ID 来 搜索 元 素 。 例 如 ， 如 果 我 们 有 一 个 带 有 如 下 id 的 <divy : 





<div id="welcome_msg"></div> 


可 以 通过 如 下 代码 来 定位 <div>: 




















element(by.id('welcome_msg')) 


by.css 可 以 使 用 by .css 来 通过 CSS 选 择 符 搜 索 元 素 。 鉴 于 我 们 会 经 常 使 用 CSS 选 择 符 来 选 











择 ， 为 方便 起 见 ，Protractor 把 全 局 变量 $ 绑 定 到 了 函数 element .by.css 上 。 
带 有 如 下 HTML : 
《<div class="container"> 


<h2>Header «</h2> 
/divx 


可 以 用 以 下 代码 来 定位 en2> 标 题 : 
element(by.css(' .container h2')) 


4. protractor 





这 个 变量 是 从 webdriver 转 来 的 Protractor 命 名 空间 。 它 包含 静态 变量 和 类 ， 可 以 用 来 操作 
Seleniun 运 行 的 浏览 器 的 DOM 实 例 。 把 这 些 全 局 变量 组 合成 分 度 器 实例 ， 我 们 就 能 写 出 更 高 效 的 


端 对 端 测试 。 


| Protractor 假 定 我 们 在 测试 Angular 应 用 , 并 且 期 望 页 面 上 已 有 Angular。 如 果 没 有 
发 现 ,会 抛 出 一 个 错误 。 使 用 browser .driver 对 象 来 深入 底层 的 webdriver 实 例 ， 
通过 这 种 方式 可 以 加 载 非 Angular 应 用 ， 不 过 这 个 已 经 超出 本 书 范 围 了 ， 此 处 不 
再 讨论 o 


例如 ， 我 们 要 测试 AngularJS 首 页 上 的 基础 示例 : 


describe('angularjs homepage', function() { 
it('should greet the named user', function() { 
// 加 载 AngularJS 首 页 
browser .get('http://www.angularjs.org'); 


element(by.model('yourName ' ) ) 
.SendKeys('Ari ' ); 


var greeting = 
element(by.binding( 'yourName' )); 


expect(greeting.getText( )) 
.toEqual('Hello Ari!'); 
| 
| 


使 用 browser 对 象 , 我 们 可 以 取 回 AngularJS 首 页 。 我 们 从 这 里 寻找 通过 ng-model 指令 绑 定 到 
一 个 xinput> 字 段 的 yourName 变 量 。 找 到 这 个 元 素 后 ， 就 让 Selenium 在 里 面 输入 Ari。 然 后 我 们 寻 
找 yourName 绑 定 的 元 素 ( 这 是 包 在 {{ yourName }} 模 板 标 签 里 的 元 素 )， 并 且 设 置 一 个 预期 : 它 





应 当 包 含 文本 “Hello Ari!”。 
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19.21 测试 实践 


尽管 对 于 如 何 使 用 Protractor 说 起 来 很 容易 , 关于 怎么 去 做 却 并 不 那么 明确 。 鉴 于 我 们 总 是 试 
着 分 享 Angular 上 可 用 的 最 高 质量 的 材料 ， 我 们 会 深入 到 对 应 用 的 测试 和 策略 里 。 





19.21.1 ”我们 的 应 用 
设想 我 们 有 一 个 应 用 ， 为 查看 Github 的 问题 提供 了 一 个 可 选 的 视图 。 这 个 简单 的 应 用 本 身 只 
有 几 个 主要 特性 : 


口 允许 用 户 在 一 个 输入 框 中 输入 仓库 的 所 有 者 和 URL; 
口 有 一 个 主页 ， 一 个 关于 页 ; 

口 它 逐 个 列 出 了 问题 ， 包 含 用 户 的 头像 。 

做 好 之 后 的 应 用 如 图 19-9 和 图 19-10 所 示 。 


enonp 

















protractorer 区 About 














图 19-9 ”最 终 的 应 用 外 观 
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图 19-10 最 终 应 用 


对 于 任何 应 用 而 言 , 我 们 都 可 以 对 要 写 的 测试 做 一 些 策略 。 可 能 会 对 一 个 很 小 的 简单 应 用 写 


上 百 个 测试 , 或 者 也 可 能 写 得 很 少 。 要 同时 写 应 用 和 测试 时 ,找到 两 者 之 间 的 平衡 会 给 我 们 带 来 
好 处 。 
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19.21.2 ”测试 的 策略 

我 们 已 经 发 现 , 介 于 编写 测试 和 编写 代码 之 间 的 最 佳 平衡 更 多 在 于 : 知道 要 测试 什么 ,怎样 
测试 。 无论 什么 时 候 给 代码 写 测试 ， 都 要 把 测试 定位 到 所 实现 的 行为 上 来 。 也 就 是 说 ,无 须 编写 
一 个 测试 ， 来 确保 在 cinput> 字 段 中 输入 时 ，chty> 标 签 的 内 容 会 变化 。 举 例 来 说 ， 我 们 需要 为 实 
时 搜索 测试 自 定 义 过 滤 。 

我 们 还 发 现 ,在 做 原型 之 前 ， 提 前 做 测试 没什么 好 处 。 在 原型 阶段 ,我 们 很 少 写 测 试 ( 如 果 
有 的 话 )， 因 为 我 们 还 在 评审 应 用 的 功能 。 然 而 ， 当 应 用 开始 增多 时 ， 写 测试 就 是 个 好 主意 了 ， 
它 可 以 确保 应 用 的 行为 在 生产 中 是 按照 我 们 的 预期 来 表现 的 。 

最 后 ,我 们 要 建立 测试 , 每 一 块 测试 的 东西 要 尽 可 能 少 。 理想 情 况 下 ， 每 个 测试 块 应 当 包 含 
不 超过 一 个 预期 。 
理论 说 得 够 多 了 ， 我 们 用 一 些 策略 来 测试 应 用 。 

我 们 想 要 测试 页 面 更 新 成 正在 测试 的 仓库 的 标题 。Angular 应 用 使 用 一 个 自 定义 服务 来 创建 
到 github.com 的 $http 请 求 。 这 个 请 求 返回 后 ， 我 们 在 前 台 页 面 填充 剩余 部 分 。 

其 次 , 我 们 想 要 测试 页 面 导 航 和 内 容 的 变化 。 这 个 测试 涉及 对 视图 上 导航 按钮 的 点 击 来 提示 
$location 变 化 。 


我 们 开始 吧 ! 









































19.22 建立 我 们 的 第 一 个 测试 
我 们 的 Protractor 配 置 文件 很 简单 ， 在 Protractor 自 带 示例 配置 文件 的 基础 上 几乎 没有 修改 ; 


// 示例 配置 文件 
exports .config = { 
seleniumAddress: 'http://0.0.0.0:4444/wd/hub ' ， 
capabilities: { 'browserName': 'chrome' }, 
specs: ['test/e2e/**/*.spec.js'], 
jasmineNodeOpts: { 
showColors: true, 
defaultTimeoutInterval: 30000 
} 
}; 


我 们 会 在 test/e2e 目 录 中 编写 自己 的 Protractor 测 试 ， 正 如 在 配置 文件 中 用 命名 约定 
[name] .spec.js 指 定 的 那样 。 我 们 来 在 teste2e 目 录 中 创建 第 一 个 测试 ， 名 为 main.spec.js。 


鉴于 Protractor 测 试 就 是 简单 的 Jasmine 测 试 ， 我 们 从 一 个 简单 的 Jasmine 桩 开始 : 


























// 在 test/e2e/main.spec. js 中 
describe('E2E: main page'，function() { 
// 把 测试 代码 放 在 这 里 
上 
考虑 到 我 们 在 用 Jasmine 写 测试 ， 所 以 可 以 使 用 beforeEach 块 来 建立 它们 。 我 们 也 需要 跟踪 
Protractor 实 例 , 所 以 创建 一 个 叫做 ptor 的 变量 来 保持 它 。 对 于 这 些 测试 中 的 每 一 个 , 我 们 都 会 使 
用 browser 对象 导航 到 首页 。 
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因为 是 在 做 端 对 端 测试 ， 我 们 需要 有 一 个 服务 器 来 让 端 对 端 测试 在 上 面 运 行 


describe('E2E: main page'，function() { 
Var ptor ; 


beforeEach(function() { 
browser .get('http://127.0.0.1:9000/'); 
ptor = protractor .getInstance( ); 
}); 
} 3 


不 是 每 次 要 测试 一 个 页 面 ， 都 要 把 测试 指向 完整 路 径 ， 可 以 在 Protractor 配 置 文件 里 面 设置 
baseUrl。 对 于 本 节 的 剩余 部 分 ， 我 们 默认 这 个 选项 被 设置 成 这 样 : 


baseUr1: 'http://127.0.0.1:9000/', 


我 们 第 一 个 测试 会 简单 地 测试 主页 加 载 : 可 以 测试 页 面 上 存在 某 个 元 素 。 既然 主页 包含 了 一 
个 ID #home ， 可 以 编写 一 个 期 望 来 保证 这 个 条 件 。 


首先 使 用 by . id( ) 函数 来 找到 我 们 关注 的 元 素 ， 用 #main ID 来 定位 这 个 cdqivy : 


it('should load the home page', function() { 
var ele = by.id('home'); 


地 











有 了 这 个 元 素 以 后 , 就 可 以 使 用 Protractor 的 实例 方法 isElementPresent( ) 来 设置 一 个 预期 : 
元 素 在 页 面 上 。 


it('should load the home page', function() { 
var ele = by.id('home'); 
expect(browser .isElementPresent(ele)).toBe(true); 


} 


要 运行 我 们 的 测试 ， 需 要 启动 一 个 Selenium 服 务 需 。 幸 好，Protractor 通 过 一 个 叫做 
webdriver-manager 的 内 置 工具 把 这 个 过 程 变 得 很 容易 。 这 个 管理 器 默认 就 被 包含 在 内 了 (正如 
我 们 在 上 面 看 到 的 )。 我 们 来 启动 webdriver-manager : 











$ ./node_modules/protractor/bin/webdriver-manager start 


在 一 个 新 的 shell 里 ,我们 要 启动 Protractor 来 真正 运行 我 们 的 测试 。 分 度 器 二 进 制 文件 带 单个 
参数 : 配置 文件 。 运 行 过 程 如 图 19-11 所 示 。 








$ ./node_modules/protractor/bin/protractor protractor_conf.js 





图 19-11 运行 过 程 
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19.23 ”测试 输入 框 19 


首先 ,我 们 把 目光 转向 测试 输入 框 。 主 页 加 载 了 一 个 表单 ， 带 有 单个 输入 框 ， 仅 在 用 户 未 选 
择 待 搜索 问题 的 仓库 时 显示 , 如 图 19-12 所 示 。 这 个 cinput type="text"> 被 绑 定 到 称 为 repoName 
的 模型 。 用 户 提交 了 表单 以 后 ， 表 单 自身 就 消失 了 ， 取 而 代 之 的 是 问题 列表 显示 。 


anc 227.0.0.1:9000/81 




















protractorer 区 3 About 


图 19-12 ”主页 中 有 一 个 输入 框 


这 段 HTML 如 下 所 示 : 


<div id="repoform" class="main" ng-if="!repoName"> 
<form ng-submit="getIssues()" class="input-group"> 
<div class="input-group"> 
“<input type="text" ng-model='repo.name' placeholder='Enter repo name' /> 
<Span class="input-group-btn"> 
“<input type="submit" class="btn btn-primary" value="Search"> 
</span> 
《</div> 
</ form> 
/div> 


我 们 在 测试 中 所 关注 的 功能 是 表单 消失 了 ， 列 表 显 示 了 。 在 一 个 新 的 测试 中 ， 我 们 要 定位 
<input> 元 素 , 并 且 在 里 面 写 东西 。 可 以 用 sendKeys( ) 方 法 在 目标 元 素 上 做 这 个 。 要 定位 cinput》 
元 素 ， 可 以 使 用 by.input() 方 法 找到 含有 ng-model1 绑 定 的 输入 元 素 。 

it('the input box should go away on submit', function() { 


element(by.input('repo.name')).sendKeys('angular/angular.js\n'); 


起 

我 们 运行 这 个 测试 时 ， 会 发 现 cinput> 字 段 被 填充 了 。 因 为 我 们 还 没有 写 预期 ， 所 以 也 就 没 
设置 ， 但 可 以 看 到 这 个 输入 框 被 十 人 了 angularvangularjs。 

要 让 我 们 的 输入 框 消失 ， 需 要 提交 表单 。 提 交 表 单 最 简单 的 方法 是 假装 按 了 回 车 按钮 。 在 上 
面 的 sendKeys( ) 中 ， 我 们 包含 了 \n 字 符 ， 它 假装 在 cinput> 元 素 中 按 下 了 回 车 。 

此 时 ， 我 们 只 需 建立 一 个 预期 : repoform 元 素 不 再 在 这 个 页 面 上 存在 了 ( 因为 我 们 用 ng-if 
把 它 隐 藏 了 )。 可 以 用 上 面 同样 的 方法 来 确认 它 不 再 存在 于 页 面 上 : 

it('the input box should go away on submit', function() { 

element(by.input('repo.name')).sendKeys('angular/angular.js\n'); 


expect(ptor .isElementPresent(by.id('repoform' ))).toBe(false); 
] 
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19.23.1 测试 列表 
在 cinputy 元 素 上 建立 测试 之 后 ， 我 们 可 以 继续 测试 列表 页 的 功能 ， 如 图 19-13 所 示 。 


ann 四 ey .127.0/0,:9000/4/ 








lssues for angular/angular.js 





图 19-13 ”测试 列表 页 


既然 剩 下 的 等 写 测试 都 是 在 列表 页 中 发 生 的 , 我 们 要 把 这 里 剩余 的 测试 都 府 套 在 它们 自己 的 
describe() 块 中 。 使 用 一 个 独立 的 块 能 让 我 们 设置 另外 一 个 beforeEach( ) 块 ， 在 里 面 我 们 会 建 
立 针 对 angular/angular.js github 仓 库 的 测试 。 


这 个 describe 块 只 会 充当 访问 我 们 主页 的 用 户 , 它 在 输入 框 中 输入 , 然后 按 了 回 车 。 我 们 现 
行 的 测试 方式 似乎 有 些 多 余 ， 但 是 请 记 住 ， 端 对 端 测试 的 目的 是 自动 化 用 户 交 互 。 

















describe('listing page', function() { 
beforeEach(function() { 
element(by.input('repo.name')).sendKeys('angular/angular.js\n'); 
] 
YA 
// 列表 页 测试 会 放 在 这 里 
小 和 


列表 页 会 有 一 些 元 素 ， 通 过 ng-repeat 迭 代 出 来 。 使 用 GitHub API， 会 默认 收 到 30 个 问题 。 
我 们 可 以 测试 这 个 页 面 确实 解析 了 30 个 问题 。 

可 以 使 用 .repeater() 帮 助 函 数 来 定位 ng-repeat 元 素 、 这 个 帮助 函数 在 页 面 上 寻找 
ng-repeat 指 令 ， 并 且 找 出 匹配 我 们 表达 式 的 那 一 个 。 在 这 种 情况 下 ,我 们 是 在 使 用 Angular 表 达 
式 d in data | orderBy:created_at:false 。 可 以 用 这 句 来 定位 循环 需 : 











by .repeater('d in data | orderBy:created_at:false' 
我 们 可 以 显 式 设置 过 滤器 〈 就 像 上 面 那 样 )， 或 者 是 停止 这 个 过 滤器 ， 使 用 更 通用 的 : 

by repeater('dq in data'); 

使 用 by .repeater() 并 未 真 的 返回 任何 元 素 ， 只 是 得 到 了 一 个 用 于 获取 元 素 的 方法 的 指 
针 。 如 果 我 们 尝试 对 by .repeater() 方 法 返回 的 对 象 设置 期 望 ， 只 会 得 到 一 个 难看 的 错误 。 


Protractor 这 人 么 做 是 因为 元 素 是 通过 promise 填 入 的 ,所 以 我 们 要 使 用 element .all1() 函 数 来 获取 
解析 后 的 元 素 。 


















































var elems = element.all(by.repeater('d in data')); 
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定位 元 素 之 后 ， 就 可 以 在 element .a11( ) 对 象 上 要 求 一 个 总 量 ,并且 设置 一 个 有 30 个 元 素 的 19 

预期 : 
it('should have 30 issues', function() { 

var elems = element.all(by.repeater('d in data')); 


expect(elems.count()).toBe(30); 
1 


太 棒 了 。 我 们 来 更 深入 了 解 这 些 重 复 的 元 素 , 确保 每 个 元 素 都 能 显示 头像 。 可 以 作 一 个 合理 
的 假设 : 每 个 元 素 都 是 由 多 个 其 他 元 素 重 复 构 成 的 ， 所 以 我 们 会 建立 一 个 测试 来 测试 单个 元 素 。 


为 了 取得 页 面 上 的 元 素 , 我 们 会 使 用 .repeater() 方 法 , 以 同样 的 方式 开始 。 element .all() 
方法 返回 一 个 对 象 ,， 包含 了 多 个 方法 ,可 以 用 来 与 重复 的 列表 元 素 交 互 。 在 这 种 情况 下 ,我们 只 
使 用 first() 方 法 来 找到 列表 中 的 第 一 个 元 素 。 


鉴于 列表 还 没有 在 页 面 上 展示 ，first() 方 法 返回 一 个 promise， 会 在 页 面 上 解析 为 第 一 个 
元 素 。 
it('includes a user gravatar per-element', function() { 
var elems = element.all(by.repeater('d in data')); 
elems.first().then(function(elm) { 
// elm 就 是 第 一 个 元 素 
} 7); 
}); 
鉴于 我 们 只 对 一 个 子 元 素 感 兴趣 ， 所 以 会 使 用 findElement() 方 法 取得 cimg> 元 素 。 可 以 用 
多 种 方式 定位 这 个 元 素 ， 我 们 会 使 用 .tagName( ) 方 法 。 跟 first( ) 方 法 一 样 ，findElement() 也 
因为 同样 的 原因 返回 了 一 个 promise。 














it('includes a user gravatar per-element', function() { 
var elems = element.all(by.repeater('d in data')); 
elems.first().then(function(elm) { 
elm.findElement(by.tagName('img')).then(function(img) { 
// img 就 是 cimg> 元 素 
}); 
}); 
a 


我 们 特别 感 兴趣 的 是 确保 src 属 性 包含 了 一 个 头像 URL。 可 以 使 用 element 对 象 提供 的 各 种 
二 站 


方法 去 更 加 深入 这 个 元 素 的 细节 。 在 本 例 中 ， 我 们 会 使 用 getAttribute( ) 方 法 来 找到 src 属 怕 
跟前 两 个 方法 一 样 ， 也 需要 把 它 设置 为 promise: 











一 二 
O 








it('includes a user gravatar per-element', function() { 
var elems = element.all(by.repeater('d in data')); 
elems.first().then(function(elm) { 
elm.findElement(by.tagName('img')).then(function(img) { 
img.getAttribute('src').then(function(src) { 
// src 就 是 文本 格式 的 img 源 地 址 
下 
中 
上 
和 


鉴于 我 们 得 到 src 属 性 ， 所 以 可 以 建立 一 个 期 望 : 图 片 源 与 gravatarcom 相 匹配 ， 如 同 GitHub 
使 用 Gravatar: 
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it('includes a user gravatar per-element', function() { 
var elems = element.all(by.repeater('d in data')); 
elems.first().then(function(elm) { 
elm.findElement(by.tagName('img')).then(function(img) { 
img.getAttribute('src').then(function(src) { 
expect(src).toMatch(/gravatar\.com\/avatar/); 
上 
}) 
3 
}); 


19.23.2 ”测试 路 由 


要 测试 的 最 后 一 个 功能 是 页 面 导航 。 正 如 预期 的 那样 , 我 们 会 使 用 页 面 上 的 元 素 操 作 来 建立 
测试 。 在 本 例 中 ， 我 们 会 用 CSS 来 定位 /about 链 接 ， 并 且 点 击 这 个 链接 。 


HTML 代 码 如 下 所 示 : 














<div class="header"> 
<uUul class="Nnav"> 
<1i ng-class="{ 
'active': isCurrentPage('') 
}"><a id="homelink" ng-href="#">Home</a> </1i> 
<li ng-class="{ 
'active': isCurrentPage('about ' ) 
}"><a id='aboutlink' ng-href="#/about">About</a> </1i> 
</ul> 
<h3 class="text-muted">protractorer«</h3> 
</div> 


/about 链 接 是 header .nav 列 表 中 的 第 二 个 元 素 。 定 位 这 个 列表 最 快 的 方法 是 通过 by .css() 
方法 使 用 CSS 选 择 器 。 

















it('should navigate to the /about page when clicking', function() { 
var link = element(by.css('.header ul li:nth-child(2)')) 
1 
因为 有 了 这 个 链接 ， 我 们 可 以 点 击 它 ， 导 航 到 新 的 URL。 导 航 到 /about 页 面 后 ， 就 可 以 测试 
页 面 内 容 显示 了 ， 或 者 也 可 以 测试 当前 的 路 由 包含 了 /about 路 径 。 既 然 能 合理 地 预期 到 Angular 路 
由 的 工作 ， 我 们 也 可 以 默认 :如果 浏览 器 的 URL 匹 配 了 about 页 ， 页 面 内 容 就 会 加 载 。 


此 , 我 们 只 简单 地 测试 当前 URL 包 含 /about。 可 以 使 用 Protractor 实 例 方法 getCurrentUr1() 
来 获得 当前 的 URL: 











it('should navigate to the /about page when clicking', function() { 
element(by.css(' .header ul li:nth-child(2)')).click(); 
expect(ptor.getCurrentUr1()).toMatch(/\/about/); 

}); 


最 后 ， 既 然 我 们 测试 的 是 前 端 ， 也 要 期 望 active 样 式 类 被 加 到 链接 上 。 
active 样 式 类 在 按钮 上 添加 了 颜色 样式 。 


我 们 希望 在 点 击 /about 链 接 时 ， 执 行 和 上 面相 同 的 操作 。 每 当 我 们 发 现 自己 在 复制 测试 数据 
时 ,就 把 测试 嵌 套 在 它们 自己 的 describe 块 中 , 并 且 把 副本 移动 到 这 个 块 中 , 通常 这 么 做 会 比较 
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好 。 让 我 们 继续 吧 ， 把 测试 移动 到 describe 块 : 





describe('page navigation', function() { 
var link; 
beforeEach(function() { 
link = element(by.css('.header ul li:nth-child(2)')); 
link.click(); 
}); 


it('should navigate to the /about page when clicking', function() { 
expect(ptor.getCurrentUr1()).toMatch(/\/about/); 
} 2) 


it('should add the active class when at /about', function() { 
// 应 当 有 active 样 式 类 
}); 
oR: 


最 后 一 个 测试 验证 了 class 列 表 中 是 否 包含 字符 串 active: 








expect(1ink.getAttribute('class' )).toMatch(/active/) ; 


19.24 页面 对 象 


为 了 让 我 们 的 测试 更 加 可 读 ， 可 以 使 用 webdriver 的 页 面 对 象 概念 。 页 面 对 象 基本 上 就 是 类 ， 
能 让 我 们 把 特定 的 页 面 功能 包装 成 一 个 干净 的 交互 。 


例如 ， 可 以 把 一 个 页 面包 装 成 这 样 : 








var AngularHomepage = function() { 
this.nameInput = element(by.model('yourName ' )); 
this.greeting = element(by.binding('yourName ' ) ) ; 


this.get = function() { 
browser .get('http://www.angularjs.org'); 


}; 


this.setName = function(name) { 
this.nameInput.sendKeys(name); 
I 
}; 


现在 可 以 把 测试 整理 成 这 样 : 
describe('angularjs homepage', function() { 
it('should greet the named user', function() { 


var angularHomepage = new AngularHomepage() ; 
angularHomepage .get(); 


angularHomepage.setName( 'Julie'); 
expect(angularHomepage.greeting.getText()).toEqual('Hello Julie!'); 
}); 
}); 


页 面 对 象 允许 我 们 创建 对 象 ， 可 以 用 在 编写 了 很 多 测试 的 页 面 上 。 例 如 ， 。 
LoginPage 页 面 对 象 ,把 username 和 password 字 上 段 包装 成 一 个 方法 。 我 们 可 以 简单 地 使 用 这 
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面 对 象 方法 来 改变 输入 的 值 ， 而 不 是 在 每 个 测试 中 每 次 都 手动 选择 username/password 字 段 。 


还 要 更 多 吗 





Protractor 是 一 个 高 度 活跃 的 GitHub 项 目 , 也 是 个 令 人 难以 置信 强大 的 端 对 端 测试 框架 。 它 很 





快 就 会 取代 官方 的 端 对 端 测试 运行 器 Karma， 并 且 会 成 为 Angular 官 方 的 测试 框架 。 





图 灵 社区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 





事 件 














在 Web 应 用 的 组 件 是 松 耦 合 的 情况 下 ， 比 如 需要 用 户 验 证 然后 处 理 授权 ， 即 时 的 通信 不 总 是 
可 行 的 ， 因 为 组 件 没有 耦合 在 一 起 。 


例如 ， 如 果 后 端 对 一 个 请 求 返回 了 状态 码 401 ( 表明 一 个 未 经 授权 的 请 求 ), 我 们 期 望 Web 
应 用 不 允许 用 户 停留 在 当前 视图 , 在 这 种 情况 下 ,我 们 希望 应 用 把 用 户 重 定向 到 登录 或 者 注册 
页 面 去 。 


基于 这 个 逻辑 , 我 们 不 能 从 外 部 告诉 控制 器 设置 一 个 新 地 址 。 我 们 也 希望 这 个 功能 能 覆盖 多 
个 作用 域 ， 这 样 可 以 用 相同 的 行为 来 保护 这 些 作 用 域 。 

我 们 需要 另 一 种 方式 在 它们 之 间 通 信 。 

Angular 的 作用 域 在 本 质 上 是 分 层次 的 : 它们 可 以 通过 父子 关系 很 自然 地 来 回 沟通 。 但 通常 ， 
作用 域 是 不 共享 变量 的 ， 它 们 执行 的 功能 往往 各 不 相同 ， 跟 在 父 树 上 的 位 置 无 关 。 

在 这 种 情况 下 ， 我 们 可 以 通过 在 这 个 链 上 传递 事件 的 方式 在 作用 域 之 间 通 信 。 






































20.1 什么 是 事件 


如 同 浏览 器 响应 浏览 器 层 的 事件 ， 比 如 鼠标 点 击 、 页 面 深 动 那样 ，Angular 应 用 也 可 以 响应 
Angular 事 件 。 这 使 我 们 可 以 在 应 用 中 舱 套 的 各 组 件 之 间 进 行 通 信 ， 即 使 这 些 组 件 在 创建 时 并 未 
考虑 到 其 他 组 件 。 











| 注意 ，Angular 事 件 系统 并 不 与 浏览 器 的 事件 系统 相通 ， 这 意味 着 ， 我 们 只 能 在 
作用 域 上 监听 Angular 事 件 而 不 是 DOM 事 件 。 





我 们 可 以 认为 , 事件 是 在 应 用 中 传播 的 信息 片段 , 通常 ( 可 选 ) 包含 了 在 应 用 中 发 生 的 事情 
的 信息 /GO 


20.2 事件 传播 


因为 作用 域 是 有 层次 的 ， 所 以 我 们 可 以 在 作用 域 链 上 传递 事件 。 


通常 来 说 , 选择 要 使 用 的 事件 传递 方式 , 一 个 好 的 经 验 法 则 是 : 查看 将 要 触发 事件 的 作用 域 。 
如 果 要 通知 整个 事件 系统 〈 允许 任意 作用 域 处 理 这 个 事件 )， 就 要 往 下 广播 。 
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男 一 方面 ， 如 果 要 提醒 一 个 全 局 模块 (为 了 说 )， 我 们 最 终 需 要 通知 高 层次 的 作用 域 (例如 
$rootScope )， 并 且 需 要 把 事件 向 上 传递 。 





| 限制 向 全 局 层面 传递 通知 的 数量 是 个 好 主意 ， 尤 其 是 因为 事件 虽然 很 强大 ， 但 
增加 了 系统 的 复杂 度 。 








比如 ， 当 我 们 在 做 路 由 的 时 候 ,“ 全 局 ”应 用 状态 需要 知道 应 用 当前 设置 了 哪个 页 面 。 另 一 
方面 ， 如 果 我 们 是 在 一 个 选项 卡 指令 和 它 的 子 面板 指令 之 间 通 信 ， 就 需要 把 事件 向 下 传 。 


20.2.1 使 用 $emit 来 冒 泡 事件 


要 把 事件 沿 着 作用 域 链 癌 上 派送 ( 从 子 作 用 域 到 父 作 用 域 )， 我 们 要 使 用 $emit() 困 数 。 
// 发 送 一 个 事件 
// 我 们 的 用 户 以 当前 user 登录 了 


scope.$emit('user:logged_in', scope.user); 


在 一 个 $emit() 事 件 函 数 的 调用 中 ， 事 件 从 子 作 用 域 骨 泡 到 父 作用 域 。 在 产生 事件 的 作用 域 
之 上 的 所 有 作用 域 都 会 收 到 这 个 事件 的 通知 。 


当 想 要 跟 应 用 的 其 他 部 分 交流 状态 的 变更 时 ， 我 们 使 用 $emit() 。 如 果 想 要 跟 $rootScope 通 
信 ， 需 要 $emit() 这 个 事件 。 


$emit( ) 方 法 带 有 两 个 参数 。 

1. name 〈 字 符 串 ) 

要 发 出 的 事件 名 称 。 

2. args 〈 集 合 ) 

一 个 参数 的 集合 ， 作 为 对 象 传递 到 事件 监听 器 中 。 

$emit() 方 法 返回 了 一 个 事件 对 象 ( 关于 事件 对 象 的 细节 ， 查 看 20.3 节 )。 
从 监听 器 中 发 出 的 一 切 异 常 都 会 传递 到 $exceptionHandler 服 务 中 。 





























20.2.2 ”使 用 $broadcast 向 下 传递 事件 


要 把 事件 向 下 传递 (从 父 作 用 域 到 子 作 用 域 )， 我 们 使 用 $broadcast( ) 函数 。 
// 等 等 ， 购 物 车 去 结账 了 

// 当 购 物 车 在 结账 的 时 候 

// 下 面 所 有 的 指令 都 应 当 禁 用 自己 


scope.$broadcast('cart:checking_out', scope.cart); 


在 $broadcast( ) 方 法 上 ， 每 个 注册 了 监听 需 的 子 作用 域 都 会 收 到 这 个 信息 。 事 件 传 播 到 所 
有 的 指令 和 当前 作用 域 的 间接 作用 域 上 ， 并 且 一 路 往 下 调用 每 个 监听 需 。 


用 了 $broadcast( ) 方 法 之 后 ， 就 没 法 取消 事件 的 发 送 了 。 
$broadcast() 方 法 自身 带 有 两 个 参数 。 
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1. name 〈 字 符 串 ) 

要 发 出 的 事件 名 称 。 

2. args 〈 集 合 ) 

一 个 参数 的 集合 ， 作 为 对 象 传递 到 事件 监听 器 中 。 

$emit() 方 法 返回 了 一 个 事件 对 象 ( 关于 事件 对 象 的 细节 ， 查 看 20.3 节 )。 
从 监听 器 中 发 出 的 一 切 异常 都 会 传递 到 $exceptionHandler 服 务 中 。 





20.3 ”事件 监听 

要 监听 一 个 事件 ， 我 们 可 以 使 用 $on( ) 方 法 。 这 个 方法 为 具有 某 个 特定 名 称 的 事件 注册 了 一 
个 监听 器 。 事 件 名 称 就 是 在 Angular 中 触发 的 事件 类 型 。 

例如 ， 我 们 可 以 在 路 由 变更 过 程 被 触发 时 ， 监 听 事 件 : 











scope.$on( '$routeCchangeStart ' ， 
function(evt, next, current) { 
// 一 个 新 的 路 由 被 触发 了 

上 

不 管 什 么 时 候 事件 $routeChangeStart (路 由 将 要 变更 的 时 候 ， 会 广播 这 个 事件 ) 被 触发 ， 
监听 需 〈 这 个 函数 ) 都 会 被 调用 。 

Angular 把 evt 对 象 作为 第 一 个 参数 传 给 正在 监听 的 一 切 事件 , 不 管 它 是 我 们 自 定 义 的 事件 还 
是 内 置 的 Angular 服 务 。 























20.4 事件 对 象 
事件 对 象 有 以 下 属性 。 
1. targetScope 〈 作 用 域 对 象 ) 
这 个 属性 是 发 送 或 者 广播 事件 的 作用 域 。 
2. currentScope 〈 作 用 域 对 象 ) 
这 个 对 象 包含 了 当前 处 理事 件 的 作用 域 。 
3. name 〈 字 符 串 ) 
这 个 字符 串 是 触发 之 后 ， 我 们 正在 处 理 的 事件 名 称 。 









































4. stopPropagation 〈 国 数 ) 
stopPropagation( ) 隐 数 取 消 通 过 $emit 触 发 的 事件 的 进一步 传播 。 








5. preventDefault (函数 ) 


preventDefault 把 defaultPrevented 标 志 设 置 为 true。 尺 管 不 能 停止 事件 的 传播 ， 我 们 可 
以 告诉 子 作 用 域 无 需 处 理 这 个 事件 (也 就 是 说 ， 可 以 安全 地 忽略 它们 )。 
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6. defaultPrevented (布尔 值 ) 











调用 preventDefault( ) 会 把 defaultPrevented 设 置 为 true。 


$on( ) 函数 返回 了 一 个 反 注册 函数 ,我 们 可 以 调用 它 来 取消 监 昕 融 。 








20.5 事件 相关 的 核心 服务 
Angular 核 心 框架 发 送 事 件 ， 我 们 监听 之 后 执行 操作 。 可 以 用 事件 来 让 自己 的 Angular 对 象 能 
在 全 局 事件 的 不 同 状态 上 与 应 用 交互 。 
我 们 用 $emit( ) 调 用 的 有 好 几 个 事件 , 它们 把 事件 往 上 发 , 更 多 调用 的 是 $broadcast() 事 件 。 




















20.5.1 核心 系统 的 $emitted 事 件 
下 面 的 事件 从 指令 向 上 发 送 到 包含 指令 调用 的 作用 域 。 我 们 可 以 使 用 $on( ) 在 这 个 链 网 上 的 
任意 作用 域 里 监听 这 些 方法 : 


$scope.$on('$includeContentLoaded', 
function(evt) { 


} 
1. $includeContentLoaded 
$includeContentLoaded 事 件 当 ngInclude 的 内 容重 新 加 载 时 ， 从 ngIncluqe 指 令 上 触发 。 





2. $includeContentRequested 

$includeContentRequested 事 件 从 调用 ngInclude 的 作用 域 上 发 送 。 每 次 ngInclude 的 内 容 
被 请 求 时 ， 它 都 会 被 发 送 。 

3. $viewContentLoaded 

$viewContentLoaded 事 件 每 当 ngView 内 容 被 重新 加 载 时 ， 从 当前 ngview 作 用 域 上 发 送 。 


20.5.2 ”核心 系统 的 $broadcast 事 件 


1. $locationChangeStart 

当 Angular 从 $location 服 务 (通过 $location.path()、$location.search() 等 ) 对 浏览 
的 地 址 作 更 新 时 ， 会 触发 $1locationChangeStart 事 件 。 

2. $locationChangeSuccess 


当 且 仅 当 浏览 圳 的 地 址 成 功 变 更 ， 又 没有 阻止 $locationCchangeStart 事 件 的 情况 下 ， 
$locationChangeSuccess 事 件 会 从 $rootScope 上 广播 出 来 。 





3. $routeChangeStart 


在 路 由 变更 发 生 之 前 , $routeChangeStart 事 件 从 $rootScope 发 送出 来 。 也 就 是 在 路 由 服务 
开始 解析 路 由 变更 所 需 的 所 有 依赖 项 时 。 
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这 个 过 程 通常 涉及 获取 视图 模板 和 解析 route 属 性 上 所 有 依赖 项 的 时 候 。 
4. $routeChangeSuccess 


在 所 有 路 由 依赖 项 跟着 $routeChangeStart 被 解析 之 后 ，$routeChangeSuccess 被 从 20 
$rootScope 上 广播 出 来 。 


ngView 指 令 使 用 $routeChangeSuccess 事 件 来 获悉 何 时 实例 化 控制 器 并 泻 染 视图 。 
5. $routeChangeError 


如 果 路 由 对 象 上 任意 的 resolve 属 性 被 拒绝 了 ，$routeChangeError 就 会 被 触发 ( 比如 它们 失 
败 了 )。 这 个 事件 是 从 $rootScope 上 广播 出 来 的 。 


6. $routeUpdate 


如 果 $routeProvider 上 的 reload0nSearch 属 性 被 设置 成 false ,并 且 使 用 了 控制 器 的 同一 个 
实例 ，$routeUpdate 事 件 会 被 从 $rootScope 上 广播 。 


7. $destroy 

在 作用 域 被 销毁 之 前 ,$destroy 事 件 会 在 作用 域 上 广播 。 这 个 顺序 给 子 作 用 域 一 个 机 会 , 在 
父 作用 域 被 真正 移 除 之 前 清理 自身 。 

例如 , 如 果 我 们 在 控制 器 中 有 一 个 正在 运行 的 $timeout , 我 们 不 希望 在 包含 它 的 控制 需 已 经 
不 存在 的 情况 下 ， 它 还 继续 触发 。 


























angular .module( 'myApp ' ) 
.controller('MainController', function($scope, $timeout) { 
Var timer; 
var updateTime = function() { 
$scope.date = new Date(); 
timer = $timeout(updateTime, 1000); 


} 
// 开始 更 新 时 间 
timer = $timeout(updateTime, 1000); 


// 在 销毁 控制 器 之 前 
// 清除 定时 器 
$scope.$on('$destroy', function() { 
if (timer) { $timeout.cancel(timer); } 


}); 
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染 构 











学 习 Angular 时 ， 最 令 人 迷惑 的 变化 是 要 学 习 如 何 考虑 应 用 的 架构 。 尽 管 我 们 不 能 强制 规定 
代码 结构 ， 因 为 那 是 开发 人 员 的 权利 ， 但 我 们 可 以 把 我 们 的 经 验 分 享 出 来 。 


21.1 目录 结构 


AngularJS 充 满 了 各 种 可 选项 , Web 应 用 的 规模 随 着 时 间 的 推移 而 增长 , 所 以 很 难 决定 如 何 组 
织 代码 。 控 制 占 放 在 哪里 最 合适 ? 我 们 是 应 该 把 服务 逻辑 放 在 一 个 文件 里 ， 还 是 把 它们 拆散 ? 





无 论 要 构建 什么 规模 的 Angular 应 用 ， 对 结构 方面 的 选择 最 好 都 要 考虑 一 下 : 将 要 使 用 什么 
工具 来 构造 这 个 应 用 ， 以 及 应 用 的 大 小 。 做 的 时 候 要 带 着 这 样 的 预期 : 项 目 是 会 增长 的 。 


我 们 建议 为 应 用 程序 创建 以 下 目录 结构 ， 应 用 的 文件 放 在 /script 目 录 ， 每 个 根据 功能 类 型 分 
开 ， 另 有 一 个 总 的 app.js 文 件 ， 如 图 21-1 所 示 。 








bower_components 


| views 








图 21-1 推荐 的 目录 结构 
| 为 了 生产 环境 的 需要 ,我们 也 建议 使 用 一 种 像 Grunt 这 样 的 工具 把 我 们 的 文件 合 
并 成 一 个 。 


每 个 Angular 对 象 都 应 当 有 自己 的 文件 ， 根 据 其 功能 来 命名 。 比 如 ，MainController 对 象 合 
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理 的 位 置 应 该 在 scripts/controllers/main.js 里 ，myFilter 对 象 在 scripts/filter/myFilter.js 里 。 

采用 这 种 结构 是 有 好 处 的 ， 因 为 每 个 文件 都 很 小 ,根据 功能 区 分 , 它 能 让 多 个 开发 人 员 有 效 
地 协同 开发 一 个 应 用 。 

此 外 , 我 们 建议 为 应 用 编写 单元 测试 时 , 在 根 目录 的 tesV 下 创建 跟 script 目 录 同 样 的 结构 ， 如 
图 21-2 所 示 。 





@O 回 spec 


Name A 





贺 appSpec.js 
> Nl config 
vm controllers 
男 mainSpec.js 
| directives 
男 ”myDirectiveSpec.js 
> 国生 filters 


> services 





图 21-2 ”推荐 的 测试 目录 结构 


创建 单 模 块 应 用 时 ,我 们 建议 用 这 样 的 结构 。 当 创建 多 模块 复合 应 用 时 ,可 以 用 一 个 有 相似 
结构 的 module/ 目 录 作 为 顶层 结构 。 








21.2 ”模块 


模块 是 Angular 应 用 的 核心 功能 。 模 块 包含 我 们 为 特定 应 用 编写 的 所 有 代码 ， 因 而 可 能 会 快 
速 膨 胀 。 尽 管 这 趋势 也 不 算 坏 〈 模块 是 一 种 减少 全 局 作用 域 干 扰 的 好 办 法 )， 我 们 还 可 以 再 细 分 
模块 。 

关于 何 时 创建 模块 , 何 时 在 全 局 模块 中 嵌 套 功能 ， 有 儿 种 不 同意 见 。 下 面 两 种 方式 都 是 把 功 
能 模块 化 的 合理 方式 。 

1. 函数 模块 化 

最 推荐 的 方法 (我们 以 及 Google 团 队 ) yet 将 应 用 程序 分 解 为 模块 。 当 根据 功能 分 解 
应 用 程序 时 ， 我 们 打算 聚焦 于 模块 函数 而 不 是 包含 的 函数 类 3 

例如 ,， 当 编写 一 个 包含 主页 路 由 和 登录 路 由 的 简单 应 用 时 , 你 可 以 构建 两 个 模块 来 交付 完全 
分 离 的 功能 。 这 个 主 应 用 看 起 来 可 能 如 下 所 示 : 


angular.module('app', [ 
"app.home '， 
"app:login' 

| 
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这 个 完整 的 应 用 程序 被 分 解 为 两 个 分 离 的 模块 并 且 包 含有 限 的 功能 , 重点 是 粘 合 应 用 程序 的 
不 同 部 分 。 在 这 个 案例 中 ， 我 们 有 包含 大 多 数 逻 辑 的 “home” 界 面 和 “login” 界 面 。 


以 这 种 方式 编写 应 用 程序 的 好 处 是 , 我 们 可 以 在 逻辑 中 分 解 函数 的 类 型 。 你 可 以 集中 于 为 应 
用 程序 的 每 个 组 成 部 分 提供 一 个 个 功能 。 还 可 以 为 我 们 编写 的 部 分 编写 测试 ， 从 而 分 解 测试 。 此 
外 , 还 可 以 延迟 加 载 应 用 程序 的 不 同 部 分 , 因此 可 以 为 屏幕 中 最 常见 的 界面 提供 最 快 的 应 用 程序 
体验 。 


此 外 ,这 样 做 还 有 一 个 好 处 : 一 次 编写 模块 就 可 跨 应 用 程序 共享 它们 。 就 是 说 ， 如 果 你 的 应 
用 程序 背后 使 用 类 似 的 登录 系统 ， 你 也 可 以 将 这 个 应 用 程序 的 登录 部 分 以 及 相关 测试 简单 地 复 
制 、 粘 贴 到 另 一 个 应 用 程序 中 。 



























































在 我 们 的 产品 应 用 程序 中 ， 我 们 使 用 这 个 方法 编写 模块 化 代码 并 且 强 烈 推 荐 它 。 
2. 功能 的 模块 化 
要 将 我 们 的 应 用 模块 化 ， 最 显而易见 的 方式 是 按照 模块 功能 划分 。 


我 们 需要 把 这 些 模块 注入 为 主 应 用 的 依赖 项 , 这 样 一 来 , 为 每 个 模块 类 型 建立 测试 都 非常 
易 ， 并 且 隔 离 和 细 分 了 功能 ， 我 们 需要 在 编写 细则 时 对 这 些 功能 作出 解释 。 


比如 ， 我 们 可 以 为 每 种 Angular 对 象 类 型 创建 一 个 模块 : 














angular.module('myApp.dqirectives'，[ 
angular .module( 'myApp .services', |[]); 
angular .module( 'myApp.filters', [|]); 
// 我 们 经 常 在 控制 器 中 使 用 服务 ， 

// 所 以 ， 我 们 会 把 它们 

// 注入 到 'myApp.controllers' 模 块 中 
angular .module( 'myApp.controllers', | 
"myApp .serVvices 


] ) 








angular.module('myApp'，[ 
"myApp.dqirectives ' ， 
"myApp .controllers ' ， 
"myApp .filters'， 
"myApp. services 


] 


使 用 这 种 方法 的 一 个 问题 是 , 它 有 时 会 给 我 们 留 下 一 堆 小 模块 。 这 一 结果 不 会 影响 性 能 , 但 
会 让 开发 变 得 索 琐 。 





21.3 ”控制 器 
当 命名 控制 器 时 ， 惯 例 是 使 用 控制 器 的 名 称 ， 用 大 写字 母 开 始 ， 再 加 controller 。 例 如 : 


angular .module( 'myApp', []) 
.controller('someController', function($scope) { 
// 一 般 不 这 么 写 





}) 

.controller('SomeController', function($scope) { 
// 这 是 控制 器 通常 的 写法 

}) 
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作用 域 的 蔓延 是 Angular 框 架 最 令 人 困惑 的 一 个 方面 ， 我 们 在 控制 器 的 $scope 中 定义 了 很 多 
功能 。 编写 Web 应 用 时 ， 有 时 会 发 现 控制 器 的 大 小 逐渐 严重 失控 。 
可 以 移出 处 理 DOM 的 方法 ， 以 减少 控制 器 的 大 小 。 把 功能 移动 到 自 定义 指令 中 ， 大 幅 降 低 
了 为 判断 是 否 公开 特定 视图 或 者 格式 化 一 个 值 的 需要 。 
因为 我 们 在 视图 里 绑 定 了 $scope 上 的 值 , 控制 器 没有 必要 负责 持 有 DOM 对 象 所 需 的 状态 值 。 1 
比如 ， 我 们 可 以 删除 控制 器 中 处 理 显示 值 的 方法 。 


假设 我 们 有 一 个 登录 页 面 , 根据 用 户 的 选择 的 状态 显示 登录 表单 或 者 注册 表单 , 把 这 个 页 面 
命名 为 showLoginForm 
































angular.module('myApp'，[]) 
.controller('LoginController', function($scope) { 
// 如 果 为 true， 显 示 为 登录 表单 
// 如 果 为 false， 显 示 为 注册 表单 
$scope.showLoginForm = true; 
$scope.sendLogin = function() {} 
$scope.sendRegister = function() {} 


}); 
在 我 们 的 HTML 里 面 ， 可 能 以 如 下 方式 设置 LoginController 的 功能 : 


<div ng-show="showLoginForm"> 

<form ng-submit="runLogin()"> <¢/form> 
«</div> 
<div ng-show="!showLoginForm"> 

<form ng-submit="runRegister()"></form> 
/div% 


尽管 这 个 例子 很 普通 ( 在 我 们 的 $scope 里 只 有 一 个 多 余 的 变量 )， 当 我 们 的 视图 变 得 越 来 越 
复杂 时 ， 这 种 变量 的 数量 会 按 指 数 级 增长 。 
使 用 指令 ， 我 们 可 以 把 这 个 值 去 掉 。 例 如 : 


angular .module( 'myApp', {]) 
.directive('loginForm', function() { 
return { 
scope: { 
onLogin: '&', 
onRegister: '&' 
}, 
templateUrl: '/templates/1loginRegForms.html', 
link: function(scope, ele, attrs) { 
scope.showLoginForm = true; 
scope.submitLogin = function() { 
scope.onLogin( {user: scope.1loginUser}); 
} 
scope.submitRegister = function() { 
scope.onRegister( {user: scope.newUser}); 


} 


} 
}); 
angular .module( 'myApp', [|]) 
.controller('LoginController', function($scope) { 
$scope.sendLogin = function() {} 
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$scope.sendRegister = function() {} 





我 们 可 以 在 视图 里 调用 这 个 指令 ， 就 像 调 用 其 他 指令 那样 : 
<div login-form 


on-login="sendLogin(user)" 
on-register="sendRegister(user)"></div> 


我 们 的 视图 变量 安全 地 藏 到 指令 里 去 了 , 不 再 需要 在 控制 器 里 持 有 视图 条 件 了 。 让 控制 器 精 
简 是 最 佳 实践 ， 使 用 指令 能 让 我 们 有 效 地 做 到 这 一 点 。 
此 外 ， 像 上 面 那样 把 登录 的 路 由 隔离 到 指令 中 ， 也 使 得 测试 它们 的 功能 更 容易 。 








在 控制 器 之 间 共 享 数据 
在 Angular 里 ， 我 们 可 以 通过 几 种 不 同 的 方式 在 控制 需 之 间 传 递 数 据 。 我 们 可 以 把 控制 铝 艇 
套 在 同一 个 父 控 制 器 中 , 允许 每 个 控制 器 独立 修改 父 控制 器 $scope 上 的 属性 值 ,， 或 者 可 以 在 服务 
中 共享 数据 。 
尽量 把 数据 存在 服务 内 部 , 但 是 更 好 的 方式 要 视 情况 而 定 。 比 如 说 ,在 一 个 对 话 框 里 ,把 正 
在 显示 的 数据 放 在 父 控制 希 里 更 有 道理 。 





















































21.4 ”指令 


知道 什么 时 候 写 指令 跟 知 道 什 么 时 候 不 写 同 样 重要 。 更 多 的 情况 下 ， 写 指令 是 个 好 主意 。 

就 像 在 上 面 看 到 的 那样 ， 它 们 减少 了 控制 器 之 中 的 混乱 。 

测试 指令 也 比 测试 控制 器 容易 得 多 。 

指令 并 不 一 定 要 有 视图 模板 。 通 常情 况 下 ， 它 们 可 以 只 作为 视图 之 下 处 理 数 据 的 垫 族 。 
ngModelController 控 制 需 就 是 这 种 功能 派 上 用 场 的 一 个 例子 。 

















21.5 测试 
我 们 总 是 鼓励 测试 我 们 的 程序 。 我 们 不 断 为 各 种 复杂 度 的 功能 编写 单元 测试 。 这 些 测试 让 我 
们 对 代码 有 信心 ,不管 这 信心 有 多 小 。 专 注 于 测试 也 让 我 们 的 时 间 更 有 效 ， 并 且 更 关注 于 功能 。 


只 要 确信 已 经 对 Angular 应 用 API 作 过 单元 测试 了 ， 就 可 以 编写 端 到 端 测试 。 端 到 端 测试 可 以 
是 脆弱 的 ,依赖 于 视图 ， 所 以 我 们 把 它们 留 到 开发 过 程 的 最 后 阶段 。 不 仅 如 此 ， 端 到 端 测试 一 般 
比 单元 测试 慢 得 多 ， 所 以 ， 在 开发 过 程 中 ， 先 写 单元 测试 能 让 我 们 更 专注 于 功能 的 实现 。 

我 们 鼓励 对 应 用 的 所 有 部 分 编写 测试 。 关 于 测试 的 更 多 信息 ， 请 参阅 第 19 章 。 
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Angular 团 队 创建 了 ngAnimate 模 块 ， 让 我 们 的 Angular 应 用 能 够 提供 CSS 和 JavaScript 动 画 。 
在 Angular 应 用 中 创建 动画 ， 有 几 种 途径 : 


口 使 用 CSS3 动 画 ; 
口 使 用 JavaScript 动 画 ; 
口 使 用 CSS3 过 渡 。 


音 则 在 讨论 这 三 种 动画 方法 ， 并 且 对 如 何 能 做 出 自己 的 动画 有 一 个 深刻 的 理解 。 

















22.1 安装 

自 1.2.0 起 , 动画 就 不 再 是 Angular 核 心 的 一 部 分 了 , 它们 存在 于 自己 的 模块 中 。 为 了 在 Angular 
应 用 中 包含 动画 ， 需 要 在 应 用 中 安装 并 且 引 用 这 个 模块 。 

可 以 从 code.angularjs.org" 上 下 载 它 ， 并 将 它 保存 到 一 个 能 从 HTML 引 用 到 的 位 置 ， 比 如 
Js/vendor/angular-animate.jso 

也 可 以 使 用 Bower 来 安装 它 ， 这 会 把 它 放 在 Bower 目 录 中 。 想 要 知道 更 多 有 关 Bower 的 信息 ， 
请 参阅 34.6 节 。 





























$ bower install --save angular-animate 
引用 了 Angular 自 身 之 后 ， 需 要 在 HTML 中 引用 这 个 动画 库 。 


<Script src="js/vendor/angular.js"></script> 
《<script src="js/vendor/angular-animate.js"></script> 


最 后 ,需要 在 我 们 的 应 用 模块 中 把 ngAnimate 模 块 当 作 依赖 项 来 引用 : 


angular.module( 'myApp', ['ngAnimate' |]); 


至 此 ， 就 已 经 准备 好 使 用 AngularJS 来 呈现 动画 了 。 








22.2” 它 是 如 何 运 作 的 
$animate 服 务 默认 给 动画 元 素 的 每 个 动画 事件 (参见 后 面 的 列表 ) 添加 了 两 个 CSS 类 。 








QD http://code.angularjs.org 
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$animate 服 务 支持 多 个 Angular 内 置 的 指令 ,它们 无 需 额 外 的 配置 即 可 支持 动画 。 它 很 灵活 ， 
我 们 可 以 为 自己 的 指令 创建 动画 。 

所 有 这 些 预先 存在 的 支持 动画 的 指令 通过 监控 指令 上 的 事件 实现 的 。 例如， 当 一 个 新 
的 ngView 进 入 并 且 把 新 内 容 带 进 浏览 器 时 ,这 个 事件 就 叫做 ngView 的 enter 事 件 。 当 ngHigde 准 备 
显示 一 个 元 素 的 时 候 ， a et 

下 面 是 指令 以 及 在 不 同 状 态 触 发 的 事件 列表 。 我 们 会 使 用 这 些 事件 来 定义 在 每 个 状态 上 , 动 
夯 会 如 何 工作 。 




















指令 事件 
ngRepeat enter 、leave 、move 
ngView enter 、leave 
ngInclude enter 、leave 
ngSwitch enter 、leave 
ngIf enter 、leave 
ngClass 或 者 class=".." add 、remove 
ngShow add、remove (.ng-class) 
ngHide add 、remove 





$animate 服 务 基于 指令 发 出 的 事件 来 添加 特定 的 样式 类 。 对 于 结构 性 的 动画 ( 比如 进入 、 移 
动 和 离开 )， 添 加 上 去 的 CSS 类 是 ng-[EVENT] 和 ng-[EVENT]-active 这 样 的 形式 。 

对 于 基于 样式 类 的 动画 ( 比如 ngClass ), 动画 样式 类 的 形式 是 [CLASS]-add、[CLASS]-add- 
actdive 、[CLASS]-remove、[CLASS]-remove-active。 


最 后 ， 对 于 ngShow 和 ngHide ， 只 有 .ng-hide 类 会 被 添加 和 移 除 ， 它 的 形式 跟 ngclass 一 


样 : .ng-hide-add、.ng-hide-add-active、.ng-hide-remove、.ng-hide-remove-active。 





























自动 添加 类 

触发 enter 事 件 的 指令 会 在 DOM 变 更 时 收 到 一 个 .ng-enter 样 式 类 ， 然 后 ，Angular 添 加 
ng-enter-active 类 ， 它 会 触发 动画 。ngAnimate 自 动 检测 CSS 代 码 来 判定 动画 什么 时 候 完 成 。 

这 个 事件 完成 时 ，Angular 会 从 DOM 元 素 上 移 除 这 两 个 类 , 使 我 们 能 够 在 DOM 元 素 上 定义 动 
画 相 关 的 属性 。 
如 果 浏 览 器 不 支持 CSS 过 渡 或 者 动画 , 动画 会 开始 , 然后 立即 结束 , DOM 会 处 于 最 终 的 状态 ， 
不 会 添加 过 渡 或 者 动画 的 样式 类 。 

所 有 支持 的 结构 性 动画 事件 都 遵循 同样 的 约定 : 进入 、 离 开 、 移动 。 基 于 样式 的 动画 事件 略 
有 不 同 (如 上 所 述 )。 























em 








22.3 使 用 CSS3 过 渡 
信 为 止 ， 我 们 在 应 用 中 包含 动画 的 最 简单 的 方式 是 使 用 CSS3 过 渡 , 除了 IE9 和 更 早 版 本 外 ， 
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不 支持 CSS3 过 渡 的 浏览 器 会 优雅 地 降级 到 应 用 的 无 动画 版 本 。 

要 做 任何 CSS 动 画 ， 我 们 都 要 确认 给 动画 中 关注 的 DOM 元 素 添加 了 样式 。 

例如 ， 在 下 面 的 示例 中 ， 我 们 看 看 如 何 让 这 个 元 素 动 起 来 : 

<div class="fade-in"></div> 

CSS3 过 渡 是 完全 基于 样式 类 的 , 意思 是 说 , 只 要 我 们 在 HTML 上 定义 了 动画 的 样式 , 这 个 动 
画 就 会 在 浏览 器 中 动 起 来 。 

为 了 用 样式 类 实现 动画 ， 需 要 遵循 Angular 的 命名 约定 来 定义 CSS 过 渡 。 

CSS 过 渡 是 让 元 素 从 一 种 样式 渐变 为 男 一 种 样式 的 特效 。 要 定义 一 个 动画 ,我 们 需要 指定 想 
要 添加 动画 的 属性 ， 以 及 特效 的 持续 时 间 。 

例如 , 这 段 代码 使 用 . fade-in 类 在 DOM 元 素 的 所 有 属性 上 添加 了 一 个 持续 两 秒 的 过 渡 特 效 。 

.fade-in { 


transition: 2s linear all; 
—webkit-transition: 2s linear all; 
























































} 
设置 了 这 个 过 渡 和 时 间 之 后 ， 就 可 以 在 DOM 元 素 的 不 同 状态 上 定义 属性 了 。 





.fade-in:hover { 
width: 300px; 
height: 300px; 

} 


使 用 ngAnimate ，Angular 通 过 给 每 个 动画 事件 添加 两 个 样式 类 的 方式 开始 了 我 们 的 指令 动 
画 : 初始 的 ng-[EVENT] 类 ， 不 久之 后 是 ng-[EVENT]-active 类 。 


为 了 自动 让 上 面 的 DOM 元 素 使 用 过 渡 实 现 Angular 动 画 , 我 们 修改 上 面 初始 的 . fade-in 示 例 
来 包含 初始 状态 类 


.fade-in.ng-enter { 


opacity: ©@; 

} 

.fade-in.ng-enter.ng-enter-active { 
opacity: 1; 

} 


OO 要 真正 运行 这 个 动画 ， 需 要 包含 CSS 动 画 定义 。 在 这 个 定义 中 ,我们 需要 同时 
包含 持续 时 间 和 将 要 修改 的 元 素 属 性 
.fade-in.ng-enter { transition: 2s linear all; -webkit-transition: 2s linear all; } 
也 可 以 把 transition 属 性 放 到 基准 CSS 类 中 (“. fade-in”， 而 不 是 在 每 个 要 产生 动画 的 地 方 
都 指定 )。 
.fade-in { 


-Webkit-transition: 2s linear all; 
transition: 2s linear all; 











} 
.fade-in.ng-enter { 
opacity: ©; 
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} 


.fade-in.ng-enter .ng-enter-active { 
opacity: 1; 
} 


.fade-in.ng-leave { 
opacity: 1; 
} 


.fade-in.ng-leave.ng-leave-active { 
opacity: ©@; 
} 


22.4 使 用 CSS3 动画 


CSS3 动 画 比 CSS3 过 滤 更 广泛 、 更 复杂 。 除 IE9 和 更 早 版 本 的 正之 外 , 所 有 主流 浏览 器 都 支持 
它们 。 使 用 CSS3 动画 ， 我 们 会 用 同样 的 初始 样式 类 ng-[EVENT] ， 但 是 不 需要 在 
ng-[EVENT]-active 状 态 中 定义 动画 状态 ， 因 为 CSS 规 则 会 处 理 剩余 部 分 。 

我 们 在 @keyframes 规 则 中 创建 动画 。 在 @keyframes 规 则 中 定义 的 CSS 元 素 内 部 , 我 们 定义 要 
处 理 的 CSS 样 式 。 


想 让 DOM 元 素 动 起 来 时 ， 我 们 使 用 animation: 属 性 来 绑 定 @keyframe CSS 属 性 ， 它 把 动画 
添加 到 CSS 元 素 上 。 











OG 当 在 CSS 元 素 上 绑 定 动画 时 ， 我 们 需要 同时 指定 动画 的 名 称 和 持续 时 间 。 


| 记得 添加 动画 持续 时 间 : 如 果 我 们 忘记 添加 动画 的 持续 时 间 ， 它 默认 会 设 成 0， 
此 时 动画 就 不 会 运行 了 。 











要 创建 ekeyframes 规 则 ， 我 们 需要 给 关键 帧 一 个 名 字 ， 并 且 设 置 动画 的 时 间 阶 段 ， 它 包含 
了 动画 过 程 中 的 属性 。 











@keyframes firstAnimation { 
@% { 
color: yellow; 


} 
100X% { 

color: black; 
} 


} 
/#k 对 于 Chrome 和 和 Safari 浏览 器 */ 
@-webkit-keyframes firstAnimation { 
/#k from 等 于 0% #/ 
from { 
color: yellow; 


} 
/# from 等 于 100% #*/ 
to { 

color: black; 
} 
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使 用 关键 字 from 等 同 于 把 百分比 设置 为 0%， 使 用 关键 字 to 等 同 于 把 百分比 设置 
成 100%。 





我 们 并 不 局 限于 9% 和 166%: 可 以 分 步 提 供 动画 ， 比 如 16%、15%， 等 等 。 要 把 @keyframe 属 性 
赋值 到 想 要 应 用 动画 的 类 上 ， 我 们 使 用 animation 关 键 字 ， 它 把 动画 应 用 到 CSS 选 择 器 选 定 的 元 
素 上 。 

.fade-in:hover { 

—webkit-animation: 2s firstAnimation; 
animation: 2s firstAnimation; 

} 

用 ngAnimate ,我 们 把 firstAnimation 值 绑 定 到 任意 用 .fade-in 类 选 定 的 元 素 上 。Angular 
自动 为 我 们 添加 和 移 除 .ng-enter 类 ， 所 以 我 们 可 以 简单 地 把 事件 添加 到 . fade-in.ng-enter 
类 上 : 

.fade-in.ng-enter { 


—webkit-animation: 2s firstAnimation; 
animation: 2s firstAnimation; 


22.5 ”交错 CSS 过 渡 / 动 画 


ngAnimate 捆 绑 了 一 个 额外 的 特性 ， 用 指定 的 延迟 来 间隔 同时 存在 的 动画 。 这 意味 着 如 果 10 
个 项 进入 了 一 个 ngRepeat 列 表 ， 每 个 项 可 以 在 上 一 个 之 后 延迟 X 训 秒 搬入。 这 样 产 生 的 特效 就 是 
一 个 交错 特效 ，ngAnimate 把 CSS 过 渡 和 动画 处 理 成 这 样 。 











22.5.1 交错 CSS 过 渡 


沿用 ng-enter 和 ng-enter-active 这 样 组 织 CSS 过 渡 代码 的 格式 ， 可 以 添加 一 个 额外 的 CSS 
类 来 提供 交错 延迟 。 使 用 下 面 的 CSS 代 码 ， 可 以 用 CSS 过 渡 来 给 我 们 的 . fade-in 类 添加 一 个 交错 
特效 。 


.fade-in.ng-enter-stagger { 
-Webkit-transition-delay:200ms ; 
transition-delay:200ms ; 








/* 防止 意外 CSS 继 承 的 保护 措施 */ 
—webkit-transition-duration:0; 
transition-duration:0; 


} 


下 面 的 代码 会 在 每 个 后 续 项 以 动画 方式 进入 之 后 , 执行 200 毫 秒 的 停顿 。 注意 , 另 有 一 个 CSS 
属性 指定 了 持续 时 间 ， 并 且 设 置 成 零 了 。 为 什么 ? 它 在 此 是 一 个 安全 防护 ， 防止 意外 的 CSS 继 承 
基础 CSS 类 。 要 是 没有 这 种 保障 ， 交 错 特效 可 能 就 会 被 忽略 了 。 


但 是 这 对 于 我 们 的 . fade-in 类 意味 着 什么 呢 ? 想象 一 下 我 们 正在 使 用 一 个 ngRepeat 元 素 ， 
这 个 元 素 使 用 的 就 是 . fade-in 类 。 


<div ng-repeat="item in items" class="fade-in"> 
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Item: #1 -- {{ item }} 
</div> 


每 次 一 系列 的 项 插入 到 列表 中 之 后 , 交错 延迟 会 逐步 启动 。 Item #1 会 被 正常 插入 , #1 会 在 200 
毫秒 之 后 ， 妆 400 毫 秒 之 后 ， 以 此 类 推 。 





22.5.2 ”交错 CSS 动 画 


CSS 动 画 也 支持 并 且 遵 循 与 上 面 提 到 的 CSS 过 渡 交 错 特效 同样 的 CSS 命 名 约定 。 唯 一 的 不 同 
是 没有 使 用 transition-delay， 而 是 用 了 animation-delay (原因 很 明显 )。 如 果 用 CSS 动 画 来 
实现 交错 特效 ，. fade-in 类 看 上 去 就 会 像 这 样 : 
































.fade-in.ng-enter-stagger { 
-Webkit 上 -animation-delay:200ms 
animation-dqelay:200ms ; 


/#k css 交 错 动画 需要 放 在 这 里 #/ 
—webkit-animation-duration:0; 
animation-duration:0; 


} 

既然 CSS 关 键 帧 要 等 到 重 排 ( 当 浏 览 器 重 绘 屏幕 ) 时 才 会 发 生 ， 可 能 会 出 现 轻 微 的 闪烁 ,或 者 
元 素 自 身 可 能 短暂 地 不 动 ， 直 到 交错 动画 开始 生效 。 这 是 因为 关键 帧 动画 尚未 触发 ， 所 以 from 或 者 
2% 的 动画 还 没有 开始 。 为 解决 这 个 问题 ， 在 赋值 了 关键 帧 动画 的 CSS 类 中 ， 可 以 放 额 外 的 CSS 样 式 。 





























.fade-in.ng-enter { 
/* 重 排 之 前 的 样式 */ 
opacity:0@; 


—webkit-animation: 2s firstAnimation; 
animation: 2s firstAnimation; 


} 

.fade-in.ng-enter-stagger { ... } 
@keyframes firstAnimation { ... } 
@-webkit-keyframes firstAnimation { ... } 


22.5.3 ”什么 指令 支持 交错 动画 


很 简单 ， 所 有 指令 都 可 以 ， 但 是 仅 当 同一 父 容器 下 的 两 个 或 更 多 相同 动画 事件 同时 触发 时 ， 
才 可 以 使 用 。 所 以 当 10 个 项 被 插入 一 个 nRepeat 列 表 时 , 交互 特效 就 产生 。 这 意味 着 如 果 ngClass 
被 放 在 一 个 ngRepeat 元 素 上 ,ngClass 的 值 在 列表 中 对 每 个 项 都 产生 了 变化 ,样式 类 变化 的 动画 
就 会 泻 染 出 一 个 交错 特效 。 

交错 动画 也 可 以 在 自 定 义 指令 中 触发 。 在 一 行 中 用 $animate 服 务 调 几 次 , 一 个 交互 动画 就 呈 
现 出 来 了 。 确保 每 个 动画 的 父 元 素 是 同一 个 , 并 且 每 个 参与 动画 元 素 的 className 值 也 是 相同 的 。 























22.6 ”使 用 JavaScript 动画 


JavaScrip 动 画 不 同 于 前 两 种 Angular 动 画 方法 ， 因 为 我 们 直接 使 用 JavaScript 设 置 DOM 元 素 的 
属性 。 
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所 有 的 主流 浏览 器 都 支持 JavaScript 动 画 , 所 以 如 果 想 在 不 支持 CSS 渐 变 和 动画 的 浏览 器 上 提 
供 动画 的 话 ， 这 是 个 好 的 选择 。 


这 里 ， 我 们 更 新 JavaScript 来 处 理 动画 ， 而 不 是 操控 CSS 来 让 元 素 动 起 来 。 


ngAnimate 在 模块 API 上 添加 了 .animation 方 法 ; 这 个 方法 提供 了 一 个 接口 ， 我 们 可 以 用 来 
创建 动画 。 


animiation() 方 法 带 有 两 个 参数 。 


口 classname ( 字符 串 ) 





























这 个 classname 会 匹配 要 产生 动画 的 元 素 的 class。 到 现在 为 止 的 例子 里 ， 这 个 动画 应 当 被 
命名 为 : .fade-in。 


口 animateFun ( 函数) 
animate 辑 数 预期 会 返回 一 个 对 象 ， 包 含 了 指令 会 触发 的 不 同事 件 函 数 ( 当 使 用 的 时 候 )。 
想 知 道 这 些 函 数 的 详细 文 要 ， 请 查阅 $animate API 文 档 。 





angular.module( 'myApp', ['ngAnimate']) 
.animation('.fade-in', function() { 
return { 


enter: function(element, done) { 
// 运行 动画 
// 当 动 画 结 束 的 时 候 调 用 done 
return function(cancelled) { 

// 关闭 或 者 取消 的 回调 
} 
} 
} 
}); 


$animate 服 务 为 指定 的 元 素 调 用 这 些 函 数 。 在 这 些 函数 里 ,我 们 可 以 对 这 个 元 素 做 任何 事情 。 
唯一 要 求 是 在 动画 结束 时 ， 需 要 调用 回调 函数 qdone( ) 。 


在 这 些 函数 中 ， 我 们 可 以 返回 一 个 end 函 数 ， 它 会 在 动画 结束 或 者 动画 被 取消 时 调用 。 


当 动 画 触发 时 , $animate 为 事件 查找 匹配 的 动画 函数 。 如 果 找 到 了 匹配 事件 的 函数 , 它 会 执 
行 这 个 函数 ， 否 则 就 会 完全 跳 过 这 个 动画 。 




















22.7 ”微调 动画 


取决 于 应 用 的 复杂 度 ，ngAnimate 和 它 下 面 的 动画 代码 可 能 会 需要 一 些 调整 。 








对 CSS 类 作 过 滤 
默认 情况 下 ， ngAnimate 会 自动 尝试 让 每 个 通过 $animate 服 务 传递 过 来 的 元 素 都 动 起 来 。 但 
是 不 必 担 心 ， 只 有 包含 了 用 CSS 或 者 JavaScript 动 画 注册 了 的 CSS 类 的 元 素 才 会 真 的 动 起 来 。 


尽管 这 个 系统 在 运作 时 , 必须 检查 每 个 可 能 的 CSS 类 , 这 可 能 会 在 低速 设备 上 慢 一 些 。 因 此 ， 
在 angularjs 的 1.2.13 发 布 版 本 中 ，ngAnimate 提 供 了 一 个 配置 项 。 让 $animate 提 供 者 可 以 使 用 正 
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则 表达 式 对 元 素 进行 过 滤 ， 以 去 掉 不 匹配 元 素 上 的 动画 操作 。 


myModule.config(function($animateProvider) { 
// 唯一 合法 的 参数 是 正则 表达 式 
$animateProvider.classNameFilter(/\banimate-/); 


下 


现在 有 了 给 定 的 正则 表达 式 ，/animated/ ， 只 有 以 animate 开 始 的 CSS 类 会 被 为 动画 而 处 理 。 
结果 , 我 们 的 . fade-in 动 画 不 会 再 运行 了 , 它 需 要 被 重 命名 成 .animate-fade-in 才 能 真正 运行 。 





22.8 DOM 回调 事件 


当 动 画 在 一 个 元 素 产生 时 ， 我 们 想 要 检测 DOM 操 作 什么 时 候 发 生 ， 可 以 在 $animate 服 务 上 
注册 一 个 事件 。 事 件 如 下 : 


element .on( '$animate:before'，function(evt，animationDetails) {}); 
element .on( '$animate:after'，function(ev 七 ，animationDetails) {}); 


22.9 内 置 指令 的 动画 


22.9.1 ngRepeat 动 画 
ngRepeat 指 令 产 生 这 文 些 事件 : 














动 作 事 件 名 
一 项 被 插入 到 列表 之 后 enter 
一 项 从 列表 中 移 除 remove 
列表 中 的 一 项 移动 了 move 





这 三 个 例子 ， 我 们 使 用 下 面 这 个 HTML : 


<div ng-controller="HomeController"> 
<Ul> 
“li class="fade-in" ng-repeat="r in roommates"> 
{这 尘 
</1i></ul> 
</div> 


我 们 的 HomeController 默 认 是 这 样 定义 的 : 





angular .module( 'myApp', ['ngAnimate']) 
.controller('HomeController', function($scope) { 

$scope.roommates = [ 
'Ari', 'Q', 'Sean', 'Anand' 

]: 

setTimeout(function() { 
$scope.roommates .push( 'Ginger' ); 
$scope.$apply(); // 触发 一 次 digest 


setTimeout(function() { 
$scope.roommates .shift(); 
$scope.$apply(); // 触发 digest 
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}, 2000); 
}, 1000); 
}); 


在 这 些 例子 中 ,我 们 有 一 个 roommates 列 表 ， 包含 了 四 个 元 素 。 在 一 秒 钟 之 后 ， 加 了 第 五 个 。 
两 秒 之 后 ， 移 除了 第 一 个 元 素 。 
1. CSS3 过 渡 
要 让 ngRepeat 列 表 中 的 元 素 动 起 来 ， 我 们 需要 确认 添加 了 展现 元 素 初 始 状态 的 CSS 样 式 类 ， 
以 及 为 enter 和 edit 状 态 定 义 最 终 状 态 的 类 。 EE 
首先 ， 在 初始 类 上 定义 动画 属性 : 


.fade-in.ng-enter, 

.fade-in.ng-leave { 
transition: 2s linear all; 
-Webkit-transition: 2s linear all; 














} 
至 此 ， 可 以 简单 地 在 动画 中 定义 初始 和 最 终 阶 段 的 CSS 属 性 。 这 里 ,我 们 把 元 素 从 绿色 的 文 
字 淡 入 , 在 进入 动画 的 最 终 阶 段 把 文字 变 成 黑色 。 在 离开 (元素 移 除 ) 动画 中 , 我 们 把 属性 反 转 : 


.fade-in.ng-enter { 


opacity: ©@; 
color: green; 
} 
.fade-in.ng-enter.ng-enter-active { 
opacity: 1; 
color: black; 
} 


.fade-in.ng-leave {} 

.fade-in.ng-leave.ng-leave-active { 
opacity: ©; 

} 


2. CSS3 关 键 帧 动画 

使 用 关键 帧 动画 时 ,无 需 定义 开始 和 结束 的 样式 类 ， 而 是 仅 定 义 单个 选择 器 , 包含 动画 样式 
的 键 。 

首先 为 关键 帧 定义 动画 属性 : 











@keyframes animateView-enter { 
from {opacity:0;} 
to {opacity:1;} 

} 

@-webkit-keyframes animateView-enter { 
from {opacity:0;} 
to {opacity:1;} 

} 

@keyframes animateView-leave { 
from {opacity: 1;} 
to {opacity: 0;} 


@-webkit-keyframes animateView-leave { 
from {opacity: 1;} 
to {opacity: 0@;} 
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设置 了 关键 帧 之 后 ， 我 们 可 以 简单 地 把 动画 附加 到 ngAnimate 添 加 的 CSS 样 式 类 上 : 








.fade-in.ng-enter { 
—webkit-animation: 2s fade-in-enter-animation; 
animation: 2s fade-in-enter-animation; 


} 


.fade-in.ng-leave { 
—webkit-animation: 2s fade-in-leave-animation; 
animation: 2s fade-in-leave-animation; 


} 
3. JavaScript 动 画 
当 用 JavaScript 做 动画 时 ， 需 要 在 动画 的 描述 对 象 上 定义 enter 和 1leave 属 性 。 














angular .module( 'myApp', ['ngAnimate']) 
.animation('.fade-in', function() { 
return { 


enter: function(element, done) { 
// 不 使 用 jQuery 的 原始 动画 
// 用 jQuery 会 简单 很 多 
var op = 0, timeout, 
animateFn = function() { 
op += 10; 
element .css('opacity' ，op/100 1) ; 
if (op >= 100) { 
clearInterval(timeout ) ; 
done( ); 


局 


// 把 初始 透明 度 设 为 9 
element .css('opacity' ，0) 
timeout = setInterval(animateFn，100) 
}; 
leave: function(element, done) { 
var op = 100， 
timeout, 
animateFn = function() { 
op-=10; 
element .css('opacity' ，op/100 ) ; 
if (op <= 0) { 
clearInterval(timeout ) ; 
done( ); 
} 
扩 
element .css('opacity'，100) ; 
timeout = setInterval(animateFn，100) 


上 交 


22.9.2 ngView 动 男 


ngView 指 令 触 发 这 些 事件 : 














动 作 事件 名 称 
新 的 视图 内 容 准 备 好 了 enter 
正在 离开 , 已 有 的 内 容 将 被 隐藏 leave 
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对 这 三 个 例子 ， 我 们 使 用 下 面 这 个 HTML 来 运行 : 


<a href="#/">Home</ay> 

<a href="#/two">Second view</a> 

<a href="#/three">Third view</a> 

《<div class="animateView" ng-view> </div> 


当 跟 ng-view 指 令 协 作 时 ,我 们 是 在 跟 Angular 内 部 的 路 由 打交道 。 有 关 路 由 的 更 多 信息 ,请 
参阅 第 12 章 。Angular 路 由 的 下 载 地 址 是 : http:/code.angularjs.org/1.2.13/angular-route.js。 


对 于 下 面 的 示例 ， 可 以 把 路 由 设置 为 : 





angular.module( 'myApp', ['ngAnimate', 'ngRoute']) 
.config( function($routeProvider) { 

$routeProvider .when('/', { 

template: '<h2>0nex</h2>' 
).when('/two', { 

template: '《h2>Twoc/h2> 
).when('/three', { 

template: '<h2>Three</h2>' 
); 





二 
示例 中 的 三 个 路 由 ， 每 个 显示 了 一 个 不 同 的 视图 。 
1. CSS3 过 渡 


要 让 ngView 列 表 中 的 元 素 动 起 来 , 我 们 需要 确认 添加 了 展现 元 素 初 始 状 态 的 CSS 样 式 类 ， 以 
及 为 enter 和 edit 状 态 定义 最 终 状 态 的 类 : 





.animateView.ng-enter, 
.animateView.ng-leave { 
transition: 2s linear all; 
-Webkit-transition: 2s linear all; 


} 


至 此 ， 可 以 简单 地 在 动画 中 定义 初始 和 最 终 阶段 的 CSS 属 性 。 这 里 ,我 们 把 元 素 从 绿色 的 文 
字 淡 入 , 在 进入 动画 的 最 终 阶 段 把 文字 变 成 黑色 。 在 离开 ( 元素 移 除 ) 动画 中 , 我 们 把 属性 反 转 : 





.animateView.ng-enter { 
opacity: ©; 
color: green; 


} 

.animateView.ng-enter.ng-enter-active { 
opacity: 1; 
color: black; 

} 


.animateView.ng-leave {} 

.animateView.ng-leave.ng-leave-active { 
opacity: ©@; 

} 


2. CSS3 关 键 帧 动画 
首先 ， 添 加 我 们 为 动画 定义 的 @keyframe : 
@keyframes animateView-enter { 


from {opacity:0;} 
to {opacity:1;} 
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】 

@-webkit-keyframes animateView-enter { 
from {opacity:0;} 

to {opacity:1;} 

} 
@keyframes animateView-leave { 
from {opacity: 1;} 

to {opacity: 0;} 

} 
@-webkit-keyframes animateView-leave { 
from {opacity: 1;} 

to {opacity: 0@;} 





} 
为 了 应 用 动画 ， 需 要 做 的 就 是 在 我 们 的 类 中 添加 动画 CSS 样 式 : 


.animateView.ng-enter { 
—webkit-animation: 2s animateView-enter; 
animation: 2s animateView-enter; 











.animateView.ng-leave { 
—webkit-animation: 2s animateView-leave; 
animation: 2s animateView-leave; 


} 

3. JavaScript 动 画 

首先 ， 我们 需要 下 载 " 并 且 在 文档 的 头 部 包含 jQuery。 
当 用 JavaScript 做 动画 时 ， 需 要 在 动画 的 描述 对 象 上 定义 enter 和 1leave 属 性 。 

















angular.module('myApp'，['ngAnimate ']) 
.animation('.animateView', function() { 
return { 


enter: function(element, done) { 
// 显示 如 何 用 jQuery 实现 动画 的 例子 
// 注意 ,这 需要 在 HTML 中 包含 jQuery 
$(element).css({ 


opacity: 0 
上 
$(element ) .animate({ 
opacity: 1 
}, done); 
}, 
leave: function(element, done) { 
done( ); 
} 


}); 


22.9.3 ngIncelude 动 


田 
ngInclude 指 令 触 发 这 些 事件 : 




















动作 事件 名 称 
新 的 视图 内 容 准 备 好 了 enter 
E 在 离开 ,已 有 的 内 容 将 被 隐藏 leave 

















GD http://jquery.com/download/ 
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对 这 三 个 例子 ， 我 们 使 用 下 面 这 个 HTML 来 运行 : 


<div ng-init="template.url='/home.html'" 
ng-controller="HomeController"> 
<button ng-click="template.url='/home.html'"> 
Home 
</buttony> 
<button ng-click="template.url='/second.html'"> 
Second 
</button> 
<button ng-click="template.url='/third.html'"> 
Third 
</buttony> 
<div class="animatelnclude" 
ng-include="template.url"> 
</div> 
/div% 


我 们 也 在 页 面 中 包含 内 联 模 板 ( 为 了 演示 )， 也 可 以 把 这 些 视 图 设置 为 从 远程 服务 器 获取 。 


《<script type="text/ng-template" id="/home.html"> 
Home Template 

</script> 

<script type="text/ng-template" id="/second.html"> 
Second Template 

</script> 

《<script type="text/ng-template" id="/third.html"> 
Third Template 

</script> 


1. CSS3 过 渡 


要 让 ngInclude 列 表 中 的 元 素 动 起 来 , 我 们 需要 确认 添加 了 展现 元 素 初 始 状态 的 CSS 样 式 类 ， 
以 及 为 enter 和 ed 让 状态 定义 最 终 状 态 的 类 








.animatelnclude.ng-enter, 
.animateInclude.ng-leave { 
transition: 2s linear all; 
-Webkit-transition: 2s linear all; 


} 


至 此 ， 可 和 阶段 的 CSS 属 性 。 这 里 ， 我 们 把 元 素 从 绿色 的 文 
字 淡 入 , 在 进入 动画 的 最 终 阶 段 把 文字 变 成 黑色 。 在 离开 (元 素 移 除 ) 动画 中 , 我 们 把 属性 反 转 : 
.animateInclude.ng-enter { 


opacity: ©; 
color: green; 

















} 

.animateInclude.ng-enter.ng-enter-active { 
opacity: 1; 
color: black; 

} 


.animateInclude.ng-leave {} 

.animateInclude.ng-leave.ng-leave-active { 
opacity: ©@; 

} 


2. CSS3 动 画 
首先 ， 添 加 为 动画 定义 的 @keyframe: 
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@keyframes animateInclude-enter { 
from {opacity:0;} 
to {opacity:1; color: green} 
} 
@-webkit-keyframes animateInclude-enter { 
from {opacity:0;} 
to {opacity:1; color: green} 
} 
@keyframes animateInclude-leave { 
from {opacity: 1;} 
to {opacity: 0; color: black} 
} 
@-webkit-keyframes animateInclude-leave { 
from {opacity: 1;} 
to {opacity: 0; color: black} 





} 
为 了 应 用 动画 ， 需 要 做 的 就 是 在 我 们 的 类 中 添加 动画 CSS 样 式 : 


.animateInclude.ng-enter { 
—webkit-animation: 2s animateInclude-enter; 
animation: 2s animateInclude-enter; 











} 


.animateInclude.ng-leave { 
—webkit-animation: 2s animateInclude-leave; 
animation: 2s animateInclude-leave; 


} 
3. JavaScript 动 画 
当 用 JavaScript 做 动画 时 ， 需 要 在 动画 的 描述 对 象 上 定义 enter 和 1leave 属 性 。 


angular.module('myApp'，['ngAnimate']) 
.animation('.animateInclude', function() { 
return { 
enter: function(element, done) { 
// 显示 如 何 用 jQuery 实现 动画 的 例子 
// 注意 ,这 需要 在 HTML 中 包含 jQuery 
$(element).css({ 














| 


opacity: 0 
] 
$(element ) .animate({ 
opacity: 1 
}, done); 
}, 
leave: function(element, done) { 
done( ); 
} 


二 


22.9.4 ngSwitch 动 画 


ngSwitch 指 令 触 发 这 些 事 件 : 





























动 作 事件 名 称 
新 的 视图 内 容 准备 好 了 Se 
正在 离开 ,已 有 的 内 容 将 被 隐藏 Lae 
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ngSwitch 指 令 类 似 于 前 面 的 例子 。 对 于 这 些 例子 ,我 们 用 下 面 使 用 了 ng-switch 指 令 的 HTML 
来 运行 : 


《<div ng-init="template='home'" 
ng-controller="HomeController"> 
<button ng-click="template='home'">Home</button> 
<button ng-click="template='second'">Second«</button> 
<button ng-click="template='third'">Third</button> 
<div ng-switch="template"> 
<div class="animateSwitch" 
ng-switch-when="home"> 
<h1i>Home</h1> 
</div> 
<dqiv class="animateSwitch" 
ng-switch-when="second"> 
<h1>Second</h1> 
《</div> 
<qiv class="animateSwitch" 
ng-switch-when="third"> 
<h1i>Home</h1> 
</div> 
</div> 
«</div> 


1. CSS3 过 渡 


要 让 ngSwitch 列 表 中 的 元 素 动 起 来 ， 我 们 需要 确认 添加 了 展现 元 素 初 始 状态 的 CSS 样 式 类 
以 及 为 enter 和 edit 状态 定义 最 终 状 态 的 类 : 





.animateSwitch.ng-enter， 
.animateSwitch.ng-leave { 
transition: 2s linear all; 
-Webkit-transition: 2s linear all; 


} 


至 此 ， 可 以 人 简单 地 在 动画 中 定义 初始 和 最 终 阶段 的 CSS 属 性 。 这 里 ， 我 们 把 元 素 从 绿色 的 
文字 淡 入 ， 在 进入 动画 的 最 终 阶 段 把 文字 变 成 黑色 。 在 离开 (元素 移 除 ) 动画 中 ， 我 们 把 属性 
反 转 : 

.animateSwitch.ng-enter { 


opacity: ©@; 
color: green; 








} 

.animateSwitch.ng-enter .ng-enter-active { 
opacity: 1; 
color: black; 

} 


.animateSwitch.ng-leave {} 

.animateSwitch.ng-leave.ng-leave-active { 
opacity: ©; 

: 


2. CSS3 动 画 
首先 ， 添 加 为 动画 定义 的 @keyframe: 


@keyframes animateSwitch-enter { 
from {opacity:0;} 
to {opacity:1; color: green} 
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} 


@-webkit-keyframes animateSwitch-enter { 


from {opacity:0;} 


to {opacity:1; color: green} 


} 
@keyframes animateSwitch-leave 
from {opacity: 1; 


{ 


to {opacity: 0; color: black} 


} 


@-webkit-keyframes animateSwitch-leave { 





from {opacity: 1 ; 


to {opacity: 0; color: black} 


} 











为 了 应 用 动画 ， 需 要 做 的 就 是 在 我 们 的 类 中 添加 动画 CSS 样 式 : 


.animateSwitch.ng-enter { 


—webkit-animation: 2s animateSwitch-enter; 
animation: 2s animateSwitch-enter; 


} 


.animateSwitch.ng-leave { 


—webkit-animation: 2s animateSwitch-leave; 
animation: 2s animateSwitch-leave; 


上 
3. JavaScript 动 画 





当 用 JavaScript 做 动画 时 ， 需 要 在 动画 的 描述 对 象 上 定义 enter 和 1leave 属 


angular.module('myApp'，['ngAnimate ']) 


.animation(' .animateSwitch ' ， 


return { 


function() { 


enter: function(element, done) { 
// 显示 如 何 用 jQuery 实现 动画 的 例子 
// 注意 ， 这 需要 在 HTML 中 包含 jQuery 


$(element ) .css( 
opacity: 0 
}); 


{ 


$(element ) .animate({ 


opacity: 1 
}, done); 
5 


leave: function(element, done) { 


done( ); 
} 


} 


22.9.5 ngIf 动 画 
ngIf 指 令 触发 这 些 事件 : 

















动 作 事件 名 称 
ngIf 的 内 容 变更 了 ， 新 DOM 被 插入 之 后 触发 Sober 
在 ngIf 的 内 容 被 移 除 之 前 触发 leave 


对 于 后 面 的 ngIf 示 例 ， 我 们 用 这 
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<div ng-init="show=false" 
ng-controller="HomeController"> 
<button ng-click="show=!show">Show</button> 
<div ng-if="show" class="animateNgIf"> 
<h2>Show me</h2> 
《</div> 
«</div> 


1. CSS3 过 渡 


要 让 ngIf 中 的 元 素 动 起 来 ， 我们 需要 确认 添加 了 展现 元 素 初始 状态 的 CSS 样 式 类 ， 以 及 为 


enter 和 ed 让 状态 定义 最 终 状 态 的 类 : 


.animateNgIf.ng-enter, 
.animateNgIf.ng-leave { 
transition: 2s linear all; 
—webkit-transition: 2s linear all; 


} 





至 此 ， 可 以 简单 地 在 动画 中 定义 初始 和 最 终 阶 段 的 CSS 属 性 。 这 里 ， 我 们 把 元 素 从 绿色 的 文 


.animateNgIf.ng-enter { 
opacity: ©@; 
color: green 
} 
.animateNgIf.ng-enter.ng-enter-active { 
opacity: 1; 
color: black; 
} 
.animateNgIf.ng-leave {} 
.animateNgIf.ng-leave.ng-leave-active { 
opacity: ©; 
} 


2. CSS3 动 画 
首先 ， 添 加 为 动画 定义 的 @keyframe: 


@keyframes animateNgIf-enter { 
from {opacity:0;} 
to {opacity:1;} 
} 
@-webkit-keyframes animateNgIf-enter { 
from {opacity:0;} 
to {opacity:1;} 
} 
@keyframes animateNgIf-leave { 
from {opacity: 1;} 
to {opacity: 0@;} 
} 
@-webkit-keyframes animateNgIf-leave { 
from {opacity: 1;} 
to {opacity: 0;} 
} 


为 了 应 用 动画 ， 需 要 做 的 就 是 在 我 们 的 类 中 添加 动画 CSS 样 式 : 


.animateNgIf.ng-enter { 
—webkit-animation: 2s animateNglf-enter; 


图 灵 社 区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊 


字 淡 入 , 在 进入 动画 的 最 终 阶 段 把 文字 变 成 黑色 。 在 离开 (元素 移 除 ) 动画 中 , 我 们 把 属性 反 转 : 


版 权 





314 第 22 章 ， Angular 动画 





animation: 2s animateNgIf-enter ; 

】 

.animateNgIf.ng-leave { 
—webkit-animation: 2s animateNglf-leave; 
animation: 2s animateNgIlf-leave; 


} 
3. JavaScript 动 画 
当 用 JavaScript 做 动画 时 ， 需 要 在 动画 的 描述 对 象 上 定义 enter 和 1leave 属 4 








angular.module( 'myApp', ['ngAnimate']) 
.animation('.animateNgIf', function() { 
return { 
enter: function(element, done) { 
// 显示 如 何 用 jQuery 实现 动画 的 例子 
// 注意 ， 这 需要 在 HTML 中 包含 jQuery 
$(element ) .css({ 


opacity: 0 
}); 
$(element).animate({ 
opacity: 1 
}, done); 
}, 
leave: function(element, done) { 
done( ); 
} 


5 


22.9.6 ngClass 动 画 
当 视 图 中 的 样式 类 发 生变 化 时 ， 是 可 以 基于 行为 去 产生 动画 的 。 当 一 个 CSS 类 变更 时 ( 比如 


在 ngShow 和 ngHide 指 令 中 ), $animate 会 通知 和 触发 动画 , 不 管 是 增加 了 新 类 


双 
组 ?9 





的 





HT 




















还 是 移 除 了 旧 类 


不 同 于 使 用 进入 动画 的 命名 约定 ， 我 们 为 ngclass 使 用 一 个 新 的 CSS 约 定 ， 依 次 为 新 类 加 后 





变 为 [CLASSNAME]-add 和 [CLASSNAME]-remove。 








类 似 于 上 面 的 进入 事件 ，ngAnimate 会 在 合适 的 时 间 为 具体 的 事件 添加 [CLASSNAME]-add- 
active 和 [CLASSNAME]-remove-active。 


当 我 们 在 这 些 样式 类 上 做 动画 时 ， 动 画 先 触发 ， 然 后 最 终 的 类 在 动画 结束 时 才 被 添加 。 当 一 
个 类 被 移 除 时 ， 它 直到 动画 结束 之 前 都 还 在 元 素 上 。 











ngClass 指 令 触 发 这 些 事件 : 





动作 人 和 
ngClass 求 值 为 真 之 后 ， 类 被 添加 之 前 aqd 


类 被 移 除 之 前 触发 remove 


对 于 后 面 的 ngclass 示 例 ， 我 们 用 这 段 HTML 来 运行 : 


<div ng-init="grow=false" 
ng-controller="HomeController"> 
<button ng-click="grow=!grow">Grow</button> 
<div ng-class="{grown:grow}" 
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class="animateMe"> 
<h2>Grow mex</h2> 
</div> 
/div> 


1. CSS3 过 渡 


要 让 ngClass 中 的 元 素 动 起 来 ,我 们 需要 确认 添加 了 展现 元 素 初始 状态 的 CSS 样 式 类 ， 以 及 
为 enter 和 edit 状 态 定义 最 终 状 态 的 类 : 


.animateMe .grown-add ， BE 
.animateMe .grown-Tremove { 

transition: 2s linear all; 

—webkit-transition: 2s linear all; 





} 
至 此 ， 可 以 简单 地 在 动画 中 定义 初始 和 最 终 阶 段 的 CSS 属 





性 。 





.grown {font-size: 50px;} 

.animateMe.grown-add { 
font-size: 16px; 

} 

.animateMe.grown-add.grown-add-active { 
font-size: 50px; 

} 

.animateMe.grown-remove {} 

.animateMe .grown-Tremove .grown-Temove-active { 

font-size: 16px; 


} 
2. CSS3 动 画 
首先 ， 添 加 为 动画 定义 的 @keyframe。 


@keyframes animateMe-add { 
from {font-size: 16px;} 
to {font-size: 50px;} 

} 

@-webkit-keyframes animateMe-add { 
from {font-size: 16px;} 
to {font-size: 50px;} 

} 
@keyframes animateMe-remove { 
to {font-size: 50px;} 

from {font-size: 16px;} 





} 
@-webkit-keyframes animateMe-remove { 
to {font-size: 50Opx;} 
from {font-size: 16px;} 








} 
为 了 应 用 动画 ， 需 要 做 的 就 是 在 我 们 的 类 中 添加 动画 CSS 样 式 : 


.animateMe.grown-add { 
—webkit-animation: 2s animateMe-add; 
animation: 2s animateMe-add; 

} 

.animateMe .grown-remove { 
—webkit-animation: 2s animateMe-remove; 
animation: 2s animateMe-remove; 





图 灵 社 区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 





316 第 22 章 ， Angular 动画 





3. JavaScript 动 画 
当 用 JavaScript 做 动画 时 ， 需 要 在 动画 的 描述 对 象 上 定义 addclass 和 removeCclass 属 性 。 








angular.module('myApp'，['ngAnimate ']) 
.animation('.animateMe', function() { 
return { 
addClass: function(ele, clsName, done) 
{ 
// 显示 如 何 用 jQuery 实现 动画 的 例子 
// 注意 ， 这 需要 在 HTML 中 包含 jQuery 
if (clsName === 'grown') { 
$(ele).animate({ 
'font-size': "50px' 
}, 20600, done); 
} else { done(); } 


}; 
removeClass: function(ele, clsName, done) 
{ 
if (clsName === 'grown') { 
$(ele).animate({ 
'font-size': '16' 
}, 20600, done); 
} else { done(); } 
} 


} 


22.9.7 ngShow/ngHide 动 画 








ngShow 和 ngHide 指 令 在 显示 或 者 隐藏 元 素 时 ， 使 用 了 .ng-hidqe 类 。 可 以 在 显示 和 隐藏 DOM 


元 素 之 间 的 这 段 时 间 添 加 动画 。 


当 在 这 些 样式 类 上 做 动画 时 ， 动 画 会 先 触 发 ， 它 完成 时 ， 最 终 的 .ng-hide 才 会 被 加 到 DOM 


元 素 上 。 




















因为 当 移 除 ng-hide 类 时 ，ng-hide 指 令 还 在 DOM 元 素 上 ， 所 以 在 它 完成 之 前 ， 我们 是 看 不 

















到 动画 的 。 因 此 ， 需 要 告诉 CSS 把 我 们 的 样式 类 显示 出 来 ， 不 要 折 芋 。 


ngShow 和 ngHide 指 令 触 发 这 些 事件 : 














动 作 事件 名 称 
ngclass 求 值 为 真 之 后 ， 类 被 添加 之 前 add 
类 被 移 除 之 后 nse 


对 后 面 的 ngHide 例 子 ， 我 们 使 用 下 面 这 个 HTML 来 运行 : 


<div ng-init="show=false" 
ng-controller="HomeController"> 
<button ng-click="show=!show">Show</button> 
《<div ng-show="show" class="animateMe"> 
<h2>Show mex</h2> 
</div> 
</div> 
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1. CSS3 过 渡 


要 让 ngHide 中 的 元 素 动 起 来 , 我 们 需要 确认 添加 了 展现 元 素 初 始 状 态 的 CSS 样 式 类 ,以 及 为 


enter 和 edit 状 态 定 义 最 终 状态 的 类 : 


.animateMe .ng-hide-add, 

.animateMe.ng-hide-remove { 
transition: 2s linear all; 
—webkit-transition: 2s linear all; 
display: block !important; 

} 


注意 CSS 块 中 的 最 后 一 行 ， 告诉 CSS 泻 染 这 个 类 ， 并 且 ， 对 于 display 属 习 





他 备 选 值 。 没 有 这 行 的 话 ， 
至 此 ， 可 以 简单 地 在 动画 中 定义 初始 和 最 终 阶 段 的 CSS 属 





性 。 





.animateMe .ng-hide-add { 
opacity: 1; 
} 
.animateMe .ng-hide-add.ng-hide-add-active 
{ 
opacity: ©; 
} 
.animateMe.ng-hide-remove { 
opacity: ©; 
} 
.animateMe.ng-hide-remove.ng-hide-remove-active { 
opacity: 1; 
} 


2. CSS3 动 画 
首先 ， 添 加 为 动画 定义 的 @keyframe。 


@keyframes animateMe-add { 
from {opacity: 1;} 
to {opacity: 0@;} 
} 
@-webkit-keyframes animateMe-add { 
from {opacity: 1;} 
to {opacity: 0@;} 
} 
@keyframes animateMe-remove { 
from {opacity:0;} 
to {opacity:1;} 
} 
@-webkit-keyframes animateMe-remove { 
from {opacity:0;} 
to {opacity:1;} 
} 


为 了 应 用 动画 ， 需 要 做 的 就 是 在 我 们 的 类 中 添加 动画 CSS 样 式 : 


.animateMe.ng-hide-add { 
—webkit-animation: 2s animateMe-add ; 
animation: 2s animateMe-add 


} 


.animateMe.ng-hide-remove { 
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-Webkit-animation: 2s animateMe-Tremove 
animation: 2s animateMe-Temove ; 
display: block !important; 


} 
3. JavaScript 动 画 
当 用 JavaScript 做 动画 时 ， 需 要 在 动画 的 描述 对 象 上 定义 addC1lass 和 removeClass 属 性 。 








angular .module( 'myApp', ['ngAnimate']) 
.animation('.animateMe', function() { 
return { 
addClass: function(ele, clsName, done) 
{ 
// 显示 如 何 用 jQuery 实现 动画 的 例子 
// 注意 ， 这 需要 在 HTML 中 包含 jQuery 
if (clsName === 'ng-hide') { 
$(ele).animate({ 
'opacity': 0 
}, 20600, done); 
} else { done(); } 


二 
removeClass: function(ele, clsName, done) 
{ 
if (clsName === 'ng-hide') { 
$(ele).css('opacity', 0); 
// 强制 移 除 ng-hide 类 
// 这 样 
// 我 们 就 可 以 真 的 把 动画 显示 出 来 
$(ele).removeClass( 'ng-hide' ); 
$(ele).animate({ 
'opacity': 1 
}, 20600, done); 
} else { done(); } 
} 


下 


22.10 创建 自 定义 动画 


$animate 服 务 给 我 们 在 指令 中 实现 自 定义 动画 提供 了 帮助 。 把 $animate 服 务 注入 到 我 们 自 
己 的 应 用 中 之 后 ， 可 以 用 暴露 出 的 事件 为 每 个 事件 触发 $animate 对 象 上 的 关联 函数 。 


要 在 我 们 自己 的 指令 中 开始 动画 ， 需 要 注入 $animate 服 务 。 


angular.module('myApp'，['ngAnimate']) 
.directive('myDirective'，function($animate) { 
return { 
template: '<div class="myDirective"></div>', 
link: function(scope, ele, attrs) { 
// 在 这 里 添加 动画 
// 例如 : 


$animate['addClass'](element, 'ng-hide'); 

















5 
至 此 ， 就 可 以 把 事件 绑 定 到 指令 上 ， 开 始 显示 我 们 的 动画 了 。 
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建立 了 指令 之 后 ， 我 们 可 以 调用 $animate 也 数 创建 一 个 动画 ， 与 我 们 的 指令 通信 。 





angular .module( 'myApp', ['ngAnimate']) 
.animation('.scrollerAnimation', function() { 
return { 


animateFun: function(element, done) { 
// 我 们 可 以 在 这 个 函数 中 
// 做 任意 想 做 的 事 
// 但 是 需要 调用 done 
// 来 让 angular 知 道 动画 结束 了 





上 和 5 


$animate 服 务 暴露 了 一 些 方法 ， 为 内 置 指令 的 动画 事件 提供 帮助 。 这 些 $animate 服 务 暴露 
出 来 的 事件 是 : 


口 enteT ; 





口 leave ; 
口 move ; 
DQ addClass; 


D femoveClass。 


$animate 服 务 把 这 些 事 件 以 函数 的 方式 提供 ， 让 我 们 能 在 自己 的 指令 中 人 处理 自 定 义 动画 。 




















22.10.1 addClass() 





adqdClass( ) 方 法 触发 了 一 个 基于 className 变 量 的 自 定义 动画 事件 ， 并 且 把 cl1assName 值 作 
为 CSS 类 添加 到 元 素 上 。 当 在 DOM 元 素 上 添加 样式 类 时 ，$animate 服 务 给 这 个 className 添 加 了 
一 个 叫 -add 的 后 级 来 让 我 们 建立 动画 。 





如 果 没 有 CSS 过 渡 ， 在 CSS 选 择 器 ( [className]-add ) 上 也 没有 定义 关键 帧 动 
画 ，ngAnimate 就 不 会 触发 这 个 动画 ， 只 是 会 把 这 个 样式 类 加 上 。 


addClass( ) 方 法 带 三 个 参数 。 





口 element (jQuery/jqLite 元 素 ) 
正在 建立 动画 的 元 素 。 

口 className ( 字符 串 ) 

正在 建立 动画 ， 并 且 添 加 到 元 素 上 的 CSS 类 。 
口 done (函数 ) 


当 动 画 完成 时 调用 的 回调 函数 。 





angular.module( 'myApp', ['ngAnimate']) 
.directive( 'myDirective', function($animate) { 
return { 
template: "div class="myDirective"></div>', 
link: function(scope, ele, attrs) { 
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ele.bind('click', function() { 
$animate.addClass(ele, 
})3 
}); 
调用 adqdclass( ) 方 法 会 经 过 如 下 步骤 : 
(1) 运行 所 有 在 元 素 上 用 JavaScript 定 义 的 动画 ; 
(2) [className]-add 类 被 添加 到 元 素 上 ; 
(3) $animate 检 查 CSS 样 式 来 寻找 过 


'greenlight ' ); 


才 渡 /动画 的 持续 时 间 和 延迟 属性 ; 








(4) [className]-add-active 类 被 添加 到 元 素 的 classList 中 (触发 CSS 动 画 ); 


(5) $animate 用 定义 过 的 持续 时 间 等 待 完成 ; 
(6) 动画 结束 , $animate 移 除 两 个 添加 的 类 : 
(7) className 类 被 添加 到 元 素 上 ; 

(8) 触发 done( ) 回 调 函 数 ( 如 果 定 义 了 的 话 )。 


22.10.2 removeClass() 


removeClass() 方 法 触发 了 一 个 基于 className 的 自 定义 动画 


值 中 定义 的 CSS 类 。 
一 个 叫 -remove 的 后 绥 来 让 我 们 建立 动画 。 


果 没 有 CSS 过 渡 ， 在 CSS 选 择 器 


[className]-add 和 [className]-add-active; 





事件 ， 并 日 移 除 在 className 
当 从 DOM 元 素 上 移 除 一 个 类 的 时 候 , $animate 服 务 给 这 





文 个 className 添 加 了 


( [className]-remove ) 上 也 没有 定义 关键 


帧 动画 ，ngAnimate 就 不 会 触发 这 个 动画 ， 只 是 会 把 这 个 样式 类 加 上 。 


removeClass( ) 方 法 带 三 个 参数 。 

口 element (jQuery/jqLite 元 素 ) 
正在 建立 动画 的 元 素 。 

D className ( 字符 串 ) 

正在 建立 动画 ， 并 且 从 元 素 上 移 除 的 CSS 类 。 
口 done ( 函数 ) 

当 动画 完成 时 调用 的 回调 函数 。 











angular.module('myApp'，['ngAnimate']) 
.directive('myDirective'，function($animate) { 
return { 
template: '<div class="myDirective"> </div>' 
link: function(scope, ele, attrs) { 
ele.bind('click', function() { 
$animate.addClass(ele, 'greenlight'); 


的 
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调用 removeClass( ) 动 画 方法 会 经 历 如 下 步 又 : 

(1) 运行 所 有 在 元 素 上 用 JavaScript 定 义 的 动画 ; 

(2) [className] -remove 类 被 添加 到 元 素 上 ; 

(3) $animate 检 查 CSS 样 式 来 寻找 过 渡 / 动 画 的 持续 时 间 和 延迟 属性 ; 

(4) [className]-remove-active 类 被 添加 到 元 素 的 classList 中 (触发 CSS 动 画 ); 
(5) $animate 用 定义 过 的 持续 时 间 等 待 完成 ; 


(6) 动画 结束 ，$animate 移 除 三 个 添加 的 类 : [className] 、[className]-remove 和 


[className] -remove-active; 


(7) 触发 gone( ) 回 调 函 数 ( 如 果 定 义 了 的 话 )。 











22.10.3 enter() 


enter( ) 方 法 把 元 素 添加 到 它 在 DOM 中 的 父 元 素 ， 然 后 运行 enter 动 画 。 动 画 开始 之 后 ， 
$animation 服 务 会 添加 ng-enter 和 ng-enter-active 类 ， 给 指令 一 个 机 会 来 建立 动画 。 


enter( ) 方 法 最 多 可 以 带 四 个 参数 。 

口 element (jQuery/jqLite 元 素 ) 
正在 建立 动画 的 元 素 。 

口 parent ( jQuery/jqLite 元 素 ) 

这 个 元 素 的 父 元 素 ， 它 是 我 们 enter 动 画 的 焦点 。 


口 after (jQuery/jqLite 元 素 ) 























这 个 元 素 的 兄弟 元 素 ， 它 将 会 成 为 enter 动 画 的 焦点 。 
口 done ( 函数) 
当 动画 完成 时 调用 的 回调 函数 。 
angular.module( 'myApp', ['ngAnimate']) 
.directive( 'myDirective', function($animate) { 
return { 
template: '<div class="myDirective">' + 
'<h2>Hix</h2></div>', 


link: function(scope, ele, attrs) { 
ele.bind('click', function() { 
$animate.enter(ele, ele.parent()); 


}); 


}) 
调用 enter( ) 动 画 方法 会 经 历 如 下 步骤 : 
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(1) 本 元 素 被 插入 父 元 素 中 ， 或 者 是 after 元 素 后 面 ; 

(2) $animate 运 行 所 有 在 元 素 上 用 JavaScript 定 义 的 动画 ; 

(3) .ng-enter 类 被 添加 到 元 素 的 classList 中 ; 

(4) $animate 检 查 CSS 样 式 来 寻找 过 渡 / 动 画 的 持续 时 间 和 延迟 属性 。 
(5) .ng-enter-active 类 被 添加 到 元 素 的 classList 中 (触发 动画 ); 
(6) $animate 用 定义 过 的 持续 时 间 等 待 完成 ; 

(7) 动画 结束 ，$animate 从 元 素 移 除 .ng-enter 和 .ng-enter-active 类 ; 
(8) 触发 done( ) 回 调 函 数 ( 如 果 定 义 了 的 话 )。 








22.10.4 leavel() 


leave( ) 方 法 运行 leave 动 画 。 当 它 结 束 运 行 时 ， 会 把 元 素 从 DOM 移 除 。 动 画 开始 之 后 ， 
会 在 元 素 上 添加 . ng-leave 和 ng-leave-active 类 。 


leave( ) 方 法 带 两 个 参数 。 

口 element (jQuery/jqLite 元 素 ) 
正在 建立 动画 的 元 素 。 

口 done( 函数 ) 

当 动画 完成 时 调用 的 回调 函数 。 








angular.module('myApp'，['ngAnimate ']) 
.directive('myDirective'，function($animate) { 
return { 

template: '<div class="myDirective">' + 
"<h2>Hix</h2> </div>', 

link: function(scope, ele, attrs) { 
ele.bind('click', function() { 

$animate. leave(ele); 


用; 
]); 
调用 leave( ) 动画 方法 会 经 历 如 下 步骤 : 
(1) $animate 可 运行 所 有 在 元 素 上 用 JavaScript 定 义 的 动画 ; 
(2) .ng-leave 类 被 添加 到 元 素 的 classList 中 ; 
(3) $animate 检 查 CSS 样 式 来 寻找 过 渡 / 动 画 的 持续 时 间 和 延迟 属性 ; 
(4) .ng-leave-active 类 被 添加 到 元 素 的 classList 中 (触发 动画 ); 
(5) $animate 用 定义 过 的 持续 时 间 等 待 完成 ; 
(0) 动画 结束 ，$animate 从 元 素 移 除 .ng-leave 和 .ng-leave-active 类 ; 
(7) 元 素 被 从 DOM 移 除 ; 
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(8) 触发 done() 回 调 函 数 (如 果 定 义 了 的 话 )。 


22.10.5 move() 


move( ) 函数 触发 nove DOM 动 画 。 在 动画 开始 之 前 ，$animate 服 务 或 者 把 元 素 插入 父 容器 中 , 或 
者 直接 加 到 after 元 素 之 后 , 如 果 有 的 话 。 动 画 开始 后 ,为 了 动画 的 持续 , .ng-move 和 .ng-move-active 
就 会 被 添加 。 

move( ) 方 法 带 有 四 个 参数 。 

口 element (jQuery/jqLite 元 素 ) 

正在 建立 动画 的 元 素 。 

口 parent (jQuery/jqLite 元 素 ) 

这 个 元 素 的 父 元 素 ， 它 是 我 们 enter 动 画 的 焦点 。 

D after (jQuery/jqLite 元 素 ) 

这 个 元 素 的 兄弟 元 素 ， 它 将 会 成 为 enter 动 画 的 焦点 。 

口 done (函数 ) 

当 动 画 完成 时 调用 的 回调 函数 。 














流 
区 








angular.module('myApp'，['ngAnimate ']) 
.qirective('myDirective'，function($animate) { 
return { 

template: '<div class="myDirective">' + 
'<h2>Hix</h2></div>', 

link: function(scope, ele, attrs) { 
ele.bind('click', function() { 

$animate.move(ele, ele.parent()); 


}); 
}); 
调用 move( ) 动 画 方法 会 经 历 如 下 步 又 : 
(1) 元 素 被 移 到 父 元 素 中 ， 或 者 在 after 元 素 之 后 ; 
(2) $animate 可 运行 所 有 在 元 素 上 用 JavaScript 定 义 的 动画 ; 
(3) .ng-move 类 被 添加 到 元 素 的 classList 中 
(4) $animate 检 查 CSS 样 式 来 寻找 过 渡 / 动 画 的 持续 时 间 和 延迟 属性 ; 
(5) .ng-move-active 类 被 添加 到 元 素 的 classList 中 (触发 动画 ); 
(6) $animate 用 定义 过 的 持续 时 间 等 待 完成 ; 
(7) 动画 结束 ，$animate 从 元 素 移 除 .ng-move 和 .ng-move-active 类 ; 
(8) 触发 done() 回 调 函 数 (如 果 定 义 了 的 话 )。 
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22.11 与 第 三 方 库 集成 





22.11.1 Animate.css 

Animate.css 库 提供 了 一 堆 很 酶 很 有 趣 的 监 浏览 絮 动 画 。 它 是 一 个 了 不 起 的 库 , 给 我 们 带 来 强 
大 的 功能 ， 并 且 无 需 做 太 多 工作 。 

很 幸运 ，Angular 社 区 已 经 提供 了 一 个 机 智 的 方法 来 把 Animate.css 类 加 到 我 们 的 Angular 应 用 
中 。 要 使 用 这 个 Animate.css 的 热 片 ， 从 https://github.com/yearofmoo/ngAnimate-animate.css 上 下 载 
animate.css 和 animate.js 吧 。 只 需 在 HTML 中 引用 它们 即 可 ， 如 下 所 示 : 




















<1-- HTML 的 头 部 --》 

<link rel="stylesheet" type="text/css" href="css/animate.css"> 

<!-- HTML 的 主体 --> 

<script type="text/javascript" src="js/vendor/animate.js"></script> 

至 此 , 无 需 把 ngAnimate 当 作 我 们 应 用 的 依赖 项 ,只 要 把 ngAnimate-animate.css 当 作 依 赖 项 包 
含 进 来 就 可 以 了 。 这 种 替代 方式 能 运行 ， 是 因为 ngAnimate-animate.css 模 块 默 认 就 请 求 了 
ngAnimate 模 块 。 

这 个 转换 做 完 之 后 ， 我 们 就 可 以 简单 地 通过 ng-class 指 令 来 引用 动画 类 了 。 

例如 : 

<div class="animateMe" 

ng-class="{'dn-fade' :dn_fade}"> 


</div> 


对 于 每 个 动画 的 可 能 性 列表 ， 敬 请 查阅 说 明文 件 ”。 
































22.11.2 TweenMax/TweentLite 
TweenLite 和 和 TweenMax 是 灵活 而 魔幻 的 库 , 它们 是 建 模 在 ActionScript 动 画 属 性 上 的 。 要 使 用 它们 ， 
需要 确认 已 经 下 载 了 Greensock 库 。 


从 Greensock2? 下 载 它 ， 然 后 存放 在 indexhtml 能 访问 到 的 位 置 。 我 们 建议 把 它 放 在 
js/Vendor/TweenMax.min.js 这 个 地 方 ， 然 后 要 确认 在 页 面 中 引用 了 TweetMax 库 : 























<ScTript type="text/javascript" src="js/vendor/TweetMax.min.js">¢/script> 


这 些 都 建立 好 了 之 后 ， 就 可 以 开始 了 。 要 在 我 们 的 应 用 中 包含 Greensock 动 画 ， 需 要 把 动画 
设置 为 使 用 JavaScript。 在 这 种 方式 下 ， 除 了 要 简单 地 用 JavaScript 处 理 一 下 动画 ， 基 本 就 没有 写 
集成 代码 的 必要 了 : 














angular .module( 'myApp', ['ngAnimate']) 
.animation('scrollAside', function($window) { 
return { 


enter: function(element, done) { 
TweenMax.set(element, { 





GD https://github.com/yearofmoo/ngAnimate-animate.css/blob/master/README.md 
© http://www.greensock.comy 
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}); 


position: "Telative' 


}); 

TweenMax.to(element, 1, { 
opacity: ©, 
width: @ 

上 


$window.setTimeout(done, 2000); 
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digest 循 环 和 $apply 




















让 我 们 来 看 看 Angular 在 后 台 是 如 何 工 作 的 。 如 何 只 使 用 几 行 代码 就 得 到 神奇 的 数据 绑 定 ? 
最 重要 的 是 理解 $qigest 循 环 是 如 何 工 作 的 ， 以 及 如 何 使 用 $apply( ) 方 法 。 


在 标准 的 浏览 器 流程 中 ， 当 事件 被 触发 时 〈 比如 点 击 一 个 链接 )， 浏 览 需 会 执行 注册 给 该 事 
件 的 回调 函数 。 
页 面 加 载 、$http 请 求 返回 响应 、 鼠 标 移动 以 及 按钮 被 点 击 等 情况 都 会 触发 事件 。 


当 事 件 被 甬 发 时 ,JavaScript 就 会 创建 一 个 事件 对 象 ， 并 执行 这 个 事件 对 象 所 在 的 监听 特定 事 
件 的 所 有 函数 。 然 后 它 会 运行 JavaScript 函 数 内 的 回调 方法 ， 这 会 回 到 浏览 器 中 ,还 可 能 更 新 DOM。 














同一 时 间 不 能 运行 两 个 事件 。 浏 览 器 会 等 待 前 一 个 事件 处 理 程序 执行 完成 ， 再 
调用 下 一 个 事件 处 理 程序 。 


在 非 Angular JavaScript 环 境 中 ， 可 以 给 div 的 点 击 事件 附加 一 个 回调 函数 。 无 论 何 时 ， 
发 现 元 素 上 的 点 击 事件 ， 这 个 回调 函数 就 会 运行 

var div = document .getElementById("clickDiv"); 

div.addEventListener("click", function(evt) { 


console.log("evt", evt); 


}); 


你 可 以 打开 Chrome 开 发 者 工具 ， 然 后 将 上 面 的 代码 复制 粘贴 到 任意 页 面 中 ， 再 
点 击 页 面试 试 。 


无 论 何 时 , 只 要 浏览 避 检 测 到 点 击 事件 , 就 会 调用 使 用 addqEventListener 注 册 到 文档 上 的 函数 。 
当 我 们 将 Angular 混 人 这 个 流程 中 时 ， 它 会 扩展 这 个 标准 的 浏览 器 流程 ， 创 建 一 个 Angular 上 
下 文 。 这 个 Angular 上 下 文 指 的 是 运行 在 Angular 事 件 循 环 内 的 特定 代码 ,该 Angular 事 件 循 环 通常 
被 称 作 $dqigest 循 环 。 为 了 理解 这 个 Angular 上 下 文 ， 需 要 看 看 在 它 里 面 到 底 发 生 了 什么 。 而 
$digest 循 环 有 两 个 主要 组 成 部 分 : 
口 $watch 列 表 ; 
口 $evalAsync 列 表 。 






































23.1 $watch 列表 
每 当 我 们 在 视图 中 追踪 一 个 事件 时 , 会 给 它 注 册 一 个 回调 函数 , 然后 希望 在 页 面 中 触发 该 事 
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件 时 调用 这 个 回调 函数 。 回 想 一 下 第 一 个 例子 : 


¢!DOCTYPE html> 

<html ng-app> 

<head> 
<title>Simple app¢/title> 
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"> 
</script> 

</head> 

<body> 
<input ng-~model="name" type="text" placeholder="Your name"> 
<hi>Hello {{ name }}</h1i> 

</body> 

</html> 


无 论 何 时 ， 只 要 用 户 更 新 这 个 输入 字段 ，UI 中 的 {{ name }} 就 会 改变 。 发 生 这 一 变化 是 因 
为 我 们 把 UI 中 的 输入 字段 绑 定 给 了 $scope .name 属 性 ,为 了 更 新 这 个 视图 , Angular 需 要 追踪 变化 。 
它 是 通过 给 $watch 列 表 添 加 一 个 监控 函数 做 到 这 一 点 的 。 


$scope 对 象 上 的 属性 只 会 在 其 被 用 于 视图 时 绑 定 。 在 上 述 例子 中 , 我 们 只 给 $watch 列 表 添 加 
了 一 个 函数 。 

记 住 ， 对 于 所 有 绑 定 给 同一 $scope 对 象 的 UI 元 素 ， 只 会 添加 一 个 $watch 到 $watch 列 表 中 。 

这 些 $watch 列 表 会 在 $dqigest 循 环 中 通过 一 个 叫做 “ 脏 值 检查 ”的 程序 解析 。 

















23.2 ” 脏 值 检查 


脏 值 检查 是 一 个 简单 的 过 程 ， 可 归结 为 一 个 非常 基础 的 概念 : 检查 值 是 否 发 生 了 变化 ， 而 整 
个 应 用 还 没 同步 该 变化 。 











除 Angular 之 外 ， 脏 值 检查 策略 通常 用 于 许多 不 同 的 应 用 程序 中 。 游 戏 引 擎 、 数 
据 库 引 擎 以 及 对 象 关系 映射 程序 (ORMs ) 都 是 这 类 系统 很 好 的 例子 。 





Angulat 应 用 持续 跟踪 当前 监控 的 值 ( 就 是 监控 对 象 中 那些 稀奇 古怪 的 东西 )。Angular 会 遍历 
$watch 列 表 , 如 果 从 旧 值 更 新 后 的 值 没有 发 生变 化 , 它 会 继续 遍历 监控 列表 。 如 果 值 发 生 了 变化 ， 
该 应 用 会 启用 新 值 并 继续 遍历 $watch 列 表 ， 如 图 23-1 所 示 。 


Anguar 裔 历 完整 个 $watch 列 表 ， 只 要 有 任何 值 发 生变 化 ， 应 用 将 会 退回 到 $watch 循 环 中 ， 
直到 检测 到 不 再 有 任何 变化 。 

为 什么 要 再 次 运行 这 一 循环? 因为 如 果 你 更 新 了 $watch 列 表 中 某 个 用 于 更 新 男 一 个 值 的 值 ， 
Angular 将 检测 不 到 更 新 ， 除 非 再 次 运行 这 个 循环 。 

如 果 这 个 循环 运行 10 次 或 者 更 多 次 ，Angular 应 用 会 抛 出 一 个 异常 ， 同 时 停止 运行 。 如 果 
Angular 没 有 抛 出 这 个 异常 ， 应 用 就 可 能 进入 无 限 循环 ， 这 是 糟糕 的 结果 。 




















在 未 来 版 本 的 Angular 中 ， 这 个 框架 会 使 用 原生 浏览 器 规范 Dbject.observe( ) ， 
这 将 大 大 加 速 脏 值 检查 过 程 。 
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图 23-1 ” digest 循环 


23.3 $watch 





email 


} Dirty:true 


email 


| Dirty: false 


$scope 对 象 上 的 $watch 方 法 会 给 Angular 事 件 循 环 内 的 每 个 $digest 调 用 装配 一 个 脏 值 检查 。 


如 果 在 表达 式 上 检测 到 变化 ，Angular 总 是 会 返回 $digest 循 环 。 
$watch 孙 数 本 身 接受 两 个 必要 参数 和 一 个 可 选 的 参数 : 


DQ watchExpression 








watchExpression 可 以 是 一 个 作用 域 对 象 的 
个 $digest 调 用 都 会 涉及 它 。 


el 
ma 
过 


?9 











函数 ， 那 么 Angular 会 认为 它 会 返回 应 ; 该 被 监控 的 值 。 


DQ listener/callback 





者 是 一 


个 函数 。 


在 $digest 循 环 中 的 每 


如 果 watchExpression 是 一 个 字符 串 , Angular 会 在 $scope 上 下 文中 对 它 求 值 。 如 果 它 是 一 个 








作为 回调 的 监听 器 函数 ， 它 只 会 在 watchExpression 的 当前 值 与 先前 值 不 相等 ( 除了 首次 运 


行 初 始 化 期 间 ) 时 调用 。 
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口 ob jectEquality (可 选 ) 

objectEquality 是 一 个 进行 比较 的 布尔 值 ， 用 来 告诉 Angular 是 否 检查 严格 相等 。 

$watch 函 数 会 给 监听 器 返回 一 个 注销 函数 ， 我 们 可 以 调用 这 个 注销 函数 来 取消 Angular 对 当 
前 值 的 监控 。 


As 
var unregisterWatch = 
$scope.$watch( 'newUser .email', 
function(newVal, oldVal) { 
if (newVal === oldVal) return; // 初始 化 











}); 

LY Ss 

// 稍 后 ， 可 以 通过 调用 这 个 注销 函数 来 注销 这 个 监控 器 

unregisterWatch( ) ; 

在 这 个 例子 中 ， 假 如 完成 了 对 newuser .email 的 监控 ,那么 可 以 通过 调用 它 所 返回 的 注销 琐 
数 来 清除 这 个 监控 器 。 

例如 ,你 想 要 解析 一 个 输入 字段 的 值 , 然后 使 用 空格 分 割 全 名 的 方式 找到 名 字 和 姓氏 。 假定 
给 定 的 视图 看 起 来 像 这 样 : 


<input type="text" ng-model="full_name" placeholder="Enter your full name"/> 





@ 永远 不 要 在 控制 器 中 使 用 $watch， 因 为 它 会 使 控制 器 难以 测试 。 这 里 为 了 解释 
说 明 寻 且 允 许 这 样 做 ， 稍 后 我 们 会 将 这 些 监 控 移 到 相应 的 服务 中 。 

















我 们 在 full1_name 属 性 上 设置 一 个 $watch 监 听 器 来 检测 值 的 任意 变化 。 也 就 是 在 full_name 
属性 上 设置 $watch 了 水 数 。 








angular .module( "myApp") 
.controller("MyController", ['$scope', function($scope) { 
$scope.$watch('full_name', function(newVal, oldVal, scope) { 
// newVal 表 示 在 这 里 可 以 用 的 full_name 新 值 
// 而 oldVal 表 示 ful1_name 的 旧 值 


}1)3 

在 这 个 例子 中 , 我 们 设置 了 一 个 AngularJS 表 达 式 , 这 会 让 Angular 应 用 “监控 full_name 属 性 
任何 可 能 的 变化 ， 然 后 在 检测 到 变化 时 运行 指定 的 函数 ”。 

监听 函数 会 在 初始 化 时 被 调用 一 次 ， 而 此 时 newval 和 oldval 的 值 都 为 undefined (并 日 是 相 
等 的 )。 在 这 种 情况 下 ， 如 果 正 处 在 初始 化 阶段 或 者 先前 的 值 发 生 了 变化 ， 通 常 最 好 是 检查 内 部 
的 表达 式 。 在 监控 函数 内 很 容易 实现 这 一 检查 ， 就 像 这 样 : 






































$scope.$watch('full_name', 
function(newVal, oldVal, scope) { 


if(newVal === oldVal) { 
// 只 会 在 监控 器 初始 化 阶段 运行 
} else { 


// 初始 化 之 后 发 生 的 变化 
} 
}); 
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在 这 段 代 码 中 ，$scope.$watch( ) 函数 在 $scope 对 象 上 为 full1_name 属 性 设置 了 一 个 监控 表 
达 式 。 


23.4 $watchCollection 





此 外 ，Angular 还 允许 我 们 为 对 象 的 属性 或 者 数组 的 元 素 设 置 浅 监控 ,然后 只 要 属性 发 生变 
化 就 触发 监听 器 回调 。 


使 用 $watchcollection 还 可 以 检测 对 象 或 数组 何 时 发 生 了 变化 ， 以 便 确 定 对 象 或 数组 中 的 
条 目 是 何 时 添加 、 移 除 或 者 移动 的 。$watchconllection 的 行为 与 $digest 循 环 中 标准 的 $watch 
的 行为 一 样 ， 我 们 甚至 可 以 把 它 当 作 标 准 的 $watch。 


$watchCollectiion( ) 阴 数 接受 2 个 参数 。 

口 obj (字符 串 /函数 ) 

这 个 对 象 就 是 一 个 要 监控 的 对 象 。 如 果 传 入 一 个 字符 串 ， 它 将 被 当 作 Angular 表 达 式 求 值 。 
如 果 传 人 的 是 一 个 函数 ， 将 在 当前 作用 域 中 被 调用 ， 并且 会 返回 要 监控 的 值 。 

口 listener ( 函数) 

这 个 回调 函数 会 在 集合 发 生变 化 时 触发 。 类 似 于 $watch 函 数 ， 这 个 函数 会 被 来 自 $watch 的 
新 集合 触发 调用 ， 而 原来 的 集合 ( 先前 集合 的 副本 ) 以 及 所 在 的 作用 域 也 随 之 生效 。 


$watchConllection( ) 函数 也 返回 一 个 注销 函数 。 调 用 这 个 注销 函数 时 ， 也 会 取消 集合 上 的 
$watch。 
































$scope.$watchCollection( 'names ' ， 
function(newNames, oldNames, scope) { 
// names 集 合 已 经 发 生 了 变化 
5 


23.5 页面 中 的 $dqigest 循环 


让 我 们 一 起 来 看 看 Web 页 面 中 的 $digest 循 环 过 程 。 首 先 ， 假设 有 一 个 ( 非常 不 可 靠 的 ) 登 
录 页 面 ， 这 个 页 面 带 有 一 个 唯一 的 用 户 名 字段 ， 人 允许 用 户 使 用 唯一 的 表单 验证 进行 登录 。 

















CR、 翅 们 不 扒 基 使 用 这 种 不 安全 的 表单 验证 ， 


<h2>Sign in</h2> 
<input type="text" placeholder="Your name" ng-model="name" ng-minlength="3" /> 
<input type="submit" ng-click="login()" value="Login" /> 


这 里 通过 ng-mode1l 指 令 在 视图 中 绑 定 了 一 个 name ，Angular 会 设置 一 个 隐 式 的 监控 器 ,将 这 
个 输入 字段 的 值 绑 定 为 当前 的 $scope 对 象 。 


当 用 户 输入 一 个 字符 到 表单 中 时 ，Angular 上 下 文 就 会 生效 并 开始 遍历 $$watchers ( $watch 
列表 js 


在 这 个 例子 中 ，$watch 列 表 只 包含 了 一 个 唯一 的 元 素 : $scope.name。 由 于 用 户 通过 输入 
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个 字符 改变 了 输入 字段 的 值 , 这 个 监控 函数 就 会 在 $scope.name 绑 定 上 执行 。 在 我 们 退出 $qigest 
循环 之 前 ， 这 一 行为 会 触发 在 该 值 ( 由 ng-model 绑 定 ) 上 运行 的 验证 和 格式 化 操作 。 

由 于 在 digest 循 环 中 值 发 生 了 变化 ，Angular 需 要 再 次 运行 这 一 循环 以 确定 它 没有 改变 作用 域 
对 象 上 的 其 他 值 。 


@ 为 什么 要 再 次 运行 digest 循 环 ? 如 果 有 一 个 名 为 $scope.full_name 的 属性 由 
$scope.first_name +$scope.1last_name 组 成 ， 那 么 这 些 值 的 任何 变化 都 会 改 
变 $scope.full_name， 因 此 循环 需要 再 次 执行 以 确认 不 再 有 任何 变化 了 。 





因为 这 里 只 改变 了 $scope.name 属 性 ， 并 没有 改变 $scope 对 象 中 的 其 他 任何 属性 ， 所 以 
$digest 循 环 会 退出 ， 然 后 浏览 右 会 重 绘 DOM 以 刷新 视图 。 


当 用 户 在 输入 字段 中 输入 他 们 的 名 字 并 点 击 提交 按钮 时 ， 会 引发 一 个 略 有 不 同 的 流程 。 


ng-click 为 DOM 元 素 绑 定 了 浏览 器 原生 的 click 事 件 。 当 这 个 DOM 元 素 收 到 点 击 事件 时 ， 
ng-click 指 令 会 调用 $scope.$apply()， 同 时 进入 $dqigest 循 环 。 




















23.6 ”$evalAsync 列表 
$evalAsync( ) 方 法 是 一 种 在 当前 作用 域 上 调度 表达 式 在 未 来 某 个 时 刻 运行 的 方式 。$digest 
循环 运行 的 第 二 个 操作 是 执行 $$asyncQueue。 可 以 使 用 $evalAsync( ) 方 法 访问 这 个 工作 队列 。 


$digest 循 环 期 间 ， 贯 穿 脏 值 检查 生命 周期 的 每 个 循环 之 间 的 队列 都 是 空 的 ， 这 意味 着 使 用 
$evalAsync 来 调用 任何 函数 都 会 发 生 两 件 事 情 。 


口 函数 会 在 这 个 方法 被 调用 的 某 个 时 刻 之 后 执行 。 
口 表达 式 求 值 之 后 至 少 会 执行 一 次 $digest 循 环 。 
$evalAsync( ) 方 法 接受 一 个 唯一 参数 : 

口 expression (字符 串 / 函 数 ) 


这 个 表达 式 便 是 我 们 想 要 在 当前 作用 域 上 执行 的 东西 。 如 果 传 人 一 个 字符 串 ，Angular 将 会 
在 当前 作用 域 上 使 用 $eval 求 值 该 表达 式 。 


如 果 传 人 的 是 一 个 函数 ，Angular 将 会 使 用 传递 给 这 个 函数 的 scope 对 象 执行 函数 求 值 。 


$scope.$evalAsync( 'attribute ' ， 
function(scope) { 
Scope. foo = "Executed" 




































































} 3 
使 用 $evalAsync 时 要 注意 的 一 些 细 
口 如 果 指 令 直接 调用 $evalAsync( )， 它 会 在 Angular 操 作 DOM 之 后 、 浏 览 器 演 染 之 前 运行 。 


口 如 果 控 制 厦 调用 $evalAsync(), 它 也 会 在 Angular 操 作 DOM 之 后 、 浏 览 避 泻 染 之 前 运行 ( 永 
远 不 要 使 用 $evalAsync( ) 来 约定 事件 的 顺序 )。 


无 论 何 时 ， 在 Angular 中 ， 只 要 你 想 要 在 一 个 行为 的 执行 上 下 文 外 部 执行 男 一 个 行为 ， 就 应 
该 使 用 $evalAsync( ) 函数 。 
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你 还 可 以 使 用 它 蔡 代 setTimeout( ) 函数 ， 但 是 它 可 能 在 浏览 器 重新 泻 染 视图 之 后 导致 屏幕 
闪烁 。 








23.7 $apply 


$apply( ) 函数 可 以 从 Angular 框 架 的 外 部 让 表达 式 在 Angular 上 下 文 内 部 执行 。 例 如 ， 假 设 你 
实现 了 一 个 setTimeout( ) 或 者 使 用 第 三 方 库 并 日 想 让 事件 运行 在 Angular 上 下 文 内 部 时 ， 就 必须 
使 用 $apply( )。 


$apply( ) 函数 接受 一 个 可 选 的 参数 : 
口 expression〈 字 符 串 /函数 ) 
这 个 表达 式 可 选 地 接受 一 个 字符 串 或 函数 ， 并 且 是 在 当前 作用 域内 执行 。 


如 果 传 人 一 个 字符 串 , $apply( ) 首 先 会 在 这 个 字符 串 上 调用 $eval(), 以 强制 Angular 在 局 部 
作用 域 上 下 文中 使 用 $eval( ) 运 行 字符 串 表达 式 。 


如 果 传 入 一 个 函数 ， 这 个 函数 将 会 在 所 传人 的 函数 作用 域 上 执行 。 


$exceptionHandler 服 务 会 捕获 和 人 处理 $eval( ) 方 法 抛 出 的 所 有 异常 。 最 后 ，$apply() 方 法 
还 会 直接 调用 $digest 循 环 。 


// 使 用 要 eval 的 字符 串 调用 $apply 示 例 
$scope.$apply('message = "Hello World"'); 
// 使 用 通 数 的 方式 并 给 函数 传 入 一 个 作用 域 
$scope.apply(function(scope) { 
// 然后 在 函数 中 使 用 传 入 作用 域 
scope.message = "Hello World"; 
1 
// 使 用 溃 数 时 忽略 作用 域 
$scope.$apply(function() { 
$scope.message = "Hello World"; 



































3} 
// 或 者 通过 在 操作 的 尾部 调用 $apply() 以 强制 运行 $digest 循 环 
$scope.apply(); 


简 而 言 之 ,使 用 $scope.$apply() 时 可 以 从 外 部 进入 上 下 文 。 


如 果 在 事件 被 触发 时 调用 $apply() ， 就 会 使 用 Angular 事 件 循环 来 运行 它 。 如 果 没 有 调用 
$apply( )， 就 不 会 在 事件 循环 内 执行 这 个 函数 ， 而 它 会 运行 在 Angular 上 下 文 外 部 。 








23.8 何 时 使 用 $apply 
通常 可 以 依赖 于 Angular 提 供 的 可 用 于 视图 中 的 任意 指令 来 调用 $apply()。 所 有 ng-[event] 
指令 (比如 ng-click 、ng-keypress ) 都 会 调用 $apply( ) 。 


此 外 还 可 以 依赖 于 一 系列 Angular 内 置 的 服务 来 调用 $digest() 。 比 如 $http 服 务 会 在 XHR 请 
求 完成 并 触发 更 新 返回 值 (promise ) 之 后 调用 $apply()。 


无 论 何 时 我 们 手动 处 理事 件 ， 使 用 第 三 方 框架 ( 比如 jQuery 、Facebook API ), 或 者 调用 
setTimeout() ， 都 可 以 使 用 $apply( ) 函数 让 Angular 返 回 $qigest 循 环 。 
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一 般 不 建议 在 控制 器 中 使 用 $apply(), 因为 这 样 会 导致 难以 测试 , 而 且 如 果 不 得 不 

在 控制 器 中 使 用 $apply() 或 者 $digest()， 很 可 能 让 事情 变 得 更 加 难以 理解 。 

当 我 们 将 jQuery 和 Angular 集 成 在 一 起 时 ( 这 通常 被 视 为 一 个 脏 脏 的 行为 )， 就 需要 使 用 
$apply( )， 因 为 Angular 不 会 察觉 到 执行 在 Angular 上 下 文 外 部 的 事件 。 例 如 ， 在 使 用 jQuery 插件 
时 ( 比如 datepicker )， 就 需要 使 用 $apply( ) 将 来 自 jQuery 的 值 传递 到 Angular 应 用 中 。 

在 这 里 ,我们 构建 了 一 个 简单 的 指令 (第 10 章 深入 探索 了 如 何 构 建 指令 )， 指 令 中 我 们 在 元 
素 上 使 用 了 datepicker 这 个 jQuery 插件 方法 。 


datepicker 插 件 暴 露 了 一 个 onSelect 事 件 ， 这 个 事件 会 在 用 户 选 择 日 期 时 触发 。 为 了 在 
Angular 应 用 内 部 获取 用 户 选 择 的 日 期 ,我 们 需要 在 $apply( ) 函数 内 运行 datepicker 的 回调 函数 。 














OO ele.datepicker() 函 数 是 由 jQuery datepicker 插 件 提供 的 可 用 于 DOM 元 素 的 属 
性 方法 。 要 让 它 工 作 起 来 ， 需 要 确保 在 页 面 上 引入 了 jQuery 和 jQuery datepicker 
插件 。 


| ctr1.$setViewValue() 函 数 是 在 DOM 元 素 上 使 用 ng-model 时 提供 的 指令 。 更 
多 信息 请 参考 第 5 章 。 


app.directive('myDatepicker', function() { 
return function(scope, ele, attrs, ctrl) { 
$(function() { 
// 在 元 素 上 调用 datepicker 方 法 
ele.datepicker({ 
dateFormat: 'mm/dd/yy', 
onSelect: function(date) { 
scope.$apply(function() { 
ctrl.$setViewValue(date); 
小 
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从 本 质 上 讲 , 在 浏览 器 中 加 载 AngularJS Web 应 用 的 方式 与 加 载 非 AngularJS 应 用 的 方式 一 样 。 
但 是 ， 它 们 的 运行 方式 略 有 不 同 。 浏 览 器 会 在 构建 DOM 元 素 时 加 载 AngularJS 库 ( 如 同 正常 加 载 
任意 JavaScript 库 )。 


当 浏 览 右 触发 DOMContentLoaded 事 件 时 ，Angular 就 开始 工作 。 它 首先 寻找 ng-app 指 令 (更 
多 关于 ng-app 指 令 的 信息 请 参考 第 10 章 )。 

















Q、 加 载 angular.js 时 ， 如 果 document .readyState 被 设置 为 complete ，Angular 也 会 
启动 初始 化 。 如 果 你 想 要 动态 连接 AngularJS 脚 本 ， 这 个 技术 是 有 用 的 。 





如 果 浏 览 器 在 DOM 中 找到 ng-app 指 令 , 它 会 为 我 们 自动 启动 应 用 。 如 果 没 有 找到 这 个 指令 ， 
Angular 期 望 我 们 自己 手动 启动 应 用 。 

要 手动 启动 一 个 AngularJS 应 用 ， 可 以 使 用 Angular 的 bootstrap() 方 法 。 在 一 些 罕见 的 情况 
下 手动 启用 应 用 程序 是 有 意义 的 。 例 如 , 想 要 在 某 个 其 他 库 的 代码 运行 之 后 , 或 者 在 运行 时 动态 
创建 元 素 时 ， 启 动 AngularJS 应 用 。 

要 想 手 动 启 动 应 用 ， 可 以 像 下 面 这 样 启动 它 : 


var newElement = document.createElement("div"); 
angular .bootstrap(newElement, ['myApp']); 





























如 果 在 DOM 中 没有 找到 ng-app 指 令 ， 而且 也 没有 手动 启动 应 用 ， 则 Angular]S 
不 会 运行 。 忘 记 在 页 面 中 引入 ng-app 指 令 肯 定 会 引发 一 些 严重 的 问题 。 
注意 ，bootstrap() 方 法 只 允许 我 们 启动 angular 应 用 一 次 。 


如 果 在 ng-app 属 性 中 没有 指定 应 用 程序 ， 则 Angular 会 加 载 一 个 不 带 特 定 模块 的 应 用 。 如 果 
间 定 了 ，Angular 就 会 加 载 与 这 个 指令 关联 的 模块 。 


使 用 没有 指定 模块 的 ng-app: 





<html ng-app> 
</html> 


使 用 带 有 指定 模块 的 ng-app: 


<html ng-app="moduleName"> 
</html> 
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Angular 会 使 用 ng-app 指 令 的 值 配 置 $injector 服 务 (第 13 章 深入 讨论 了 这 个 服务 )。 
一 旦 应 用 程序 加 载 完成 ，$injector 就 会 在 应 用 程序 的 $rootScope 旁 边 创 建 $compile 服 务 。 


$rootScope 创 建 后 , $compile 服 务 就 会 接管 它 。 它 会 将 $rootScope 与 现 有 的 DOM 连 接 起 来 ， 
然后 从 将 ng-app 指 令 设置 为 祖先 的 地 方 开 始 编译 DOM。 


24.1 视图 的 工作 原理 


当 浏 览 器 在 标准 的 Web 流 程 中 获取 HTML 时 ， 它 会 收 到 HTML 代 码 并 将 它 解析 为 一 个 DOM 
树 。 这 个 DOM 树 中 的 每 个 元 素 被 称 作 DOM 元 素 ， 这 些 DOM 元 素 会 构建 一 堆 节 点 。 然 后 浏览 器 负 
会 制 出 这 个 DOM 树 的 结构 。 


浏览 器 在 提取 脚本 时 ( 从 <script> 标 签 中 ), 会 暂停 DOM 解 析 并 等 待 脚本 取 回 (你 可 以 修改 
这 一 行为 ,但 是 这 个 行为 是 默认 的 )。 

当 angular .js 被 取 回 时 ,浏览 器 会 执行 它 ， 同 时 设置 一 个 事件 监听 器 来 监听 浏览 器 的 
DOMContentLoaded 事 件 。 





























泥 


























OG DOMContentLoaded 事 件 会 在 HTML 文 档 加 载 完成 并 开始 解析 时 触发 。 


检测 到 这 个 事件 时 , Angular 会 查找 ng-app 指 令 , 然后 创建 运行 需要 的 一 系列 必要 的 组 件 ( 即 
$injector 、$compile 服 务 以 及 $rootScope )， 然 后 开始 解析 DOM 树 。 


24.1.1 编译 阶段 


$compile 服 务 会 遍历 DOM 树 并 搜集 它 找到 的 所 有 指令 ， 然 后 将 所 有 这 些 指令 的 链接 函数 合 
并 为 一 个 单一 的 链接 函数 。 


然后 这 个 链接 函数 会 将 编译 好 的 模板 链接 到 $rootScope 中 (也 就 是 附属 于 ng-app 所 在 的 
DOM 元 素 的 作用 域 )。 


它 会 通过 检查 DOM 属 性 、 注 释 、 类 以 及 DOM 元 素 名 称 的 方式 查找 指令 。 
























































<Span my-directive> «</span> 

<Span class="my-directive"></span> 
<my-directive></my-directive> 

<!-— directive: my-directive -—-> 


OO 更 多 有 关 指 令 的 信息 请 参考 第 10 章 。 


$compile 服 务 通过 遍历 DOM 树 的 方式 查找 有 声明 指令 的 DOM 元 素 。 当 碰 到 带 有 一 个 或 多 个 
指令 的 DOM 元 素 时 ， 它 会 排序 这 些 指令 〈 基于 指令 的 priority 优 先 级 )， 然 后 使 用 $injector 服 
务 查找 和 收集 指令 的 compile 函 数 并 执行 它 。 


指令 中 的 compile 函 数 会 在 适当 的 时 候 处 理 所 有 DOM 转 换 或 者 内 联 模板 , 如同 创建 模板 的 
副本 。 
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// 返回 一 个 链接 函数 

var linkFunction = $compile(appElement); 

// 调用 链接 函数 ， 将 $rootScope 附 加 给 DOM 元 素 

linkFunction($rootScope); 

每 个 节点 的 编译 方法 运行 之 后 , $compile 服 务 就 会 调用 链接 函数 。 这 个 链接 丽 数 为 绑 定 了 圭 
闭 作用 域 的 指令 设置 监控 。 这 一 行为 会 创建 实时 视图 。 


最 后 ， 在 $compile 服 务 完成 后 ，AngularJS 运 行 时 就 准备 好 了 。 

















24.1.2 ”运行 时 


在 标准 的 浏览 器 流程 中 ， 事 件 循环 会 等 待 事件 执行 〈 比如 鼠标 移动 、 点 击 、 按 键 等 )。 当 这 
些 事件 发 生 时 ,它们 会 被 放 到 浏览 锅 的 事件 队列 中 。 如 果 有 函数 处 理 程序 对 事件 作出 响应 ,浏览 
器 就 会 将 event 对 象 作 为 参数 来 调用 这 些 事件 处 理 程序 。 








ele.addEventListener('click', function(event) {}); 


Angular 中 对 事件 循环 做 了 一 点 增强 ， 并 且 Angular 还 提供 了 自己 的 事件 循环 。 指 令 自 身 会 注 
册 事 件 监听 需 ， 因 此 当 事 件 被 触发 时 ， 指 令 函 数 承 会 运行 在 AngularJS 的 $qigest 循 环 中 。 





Q、 Angular 的 事件 循环 被 称 作 $digest 循 环 。 这 个 $digest 循 环 由 两 个 小 型 的 循环 组 
成 ， 分 别 是 evalAsync 循 环 和 $watch 列 表 。 


眶 


事件 被 触发 时 ， 事 件 处 理 程序 就 会 在 指令 的 上 下 文中 进行 调用 ， 也 就 是 AngularJS 的 上 下 
文中 。 从 功能 上 讲 ，AngularJS 会 在 包含 作用 域 的 $apply() 方 法 内 调用 指令 。Angular 是 在 
$rootScope 上 启 动 $digest 循 环 时 开始 整个 过 程 的 ， 并 且 还 会 传播 到 所 有 子 作用 域 中 。 


Angular 进 入 $dqigest 循 环 时 ， 会 等 待 $evalAsync 队 列 清 空 ， 然 后 再 将 回调 执行 上 下 文 交 还 
给 浏览 器 。 这 个 $evalAsync 用 于 在 浏览 需 进 行 渔 染 之 前 ， 调 度 需 要 运行 在 当前 桢 栈 ( stack frame ) 
之 外 的 所 有 任务 。 

此 外 ，$qigest 循 环 还 会 等 待 $watch 表 达 式 列表 ， 它 是 一 个 可 能 在 上 一 次 迭代 过 程 中 被 改变 
的 潜在 的 表达 式 数组 。 如 果 检 测 到 变化 ， 就 调用 $watch 函 数 ， 然 后 再 次 查看 $watch 列 表 以 确保 
没有 东西 被 改变 。 


























Q、 注意 ， 对 于 $watch 列 表 中 检测 到 的 任何 变化 ，AngularJS 都 会 再 次 查看 这 个 列表 
以 确保 没有 东西 被 改变 。 





一 且 $digest 循 环 稳定 下 来 , 并且 检 测 到 没有 洪 在 的 变化 了 , 执行 过 程 就 会 离开 Angular 上 下 
文 并 且 通 常会 回 到 浏览 右 中 ，DOM 将 会 被 泻 染 到 这 里 。 

整个 流程 在 每 个 浏览 器 事 件 之 间 都 会 发 生 ， 这 也 是 Angular 如 此 强大 的 原因 。 它 还 可 以 将 来 
自 浏 览 器 的 事件 注入 到 AngularJS 流 程 中 。 
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最 受 欢 迎 、 支 持 最 好 的 AngularJS 插 件 之 一 是 AngularUI 框 架 。 


25.1 AngularUl 


AngularJS 自 带 了 很 多 方便 的 特性 ， 你 可 以 用 它 来 构建 富有 表现 力 的 AngularJS 应 用 而 无 需 依 
赖 额外 的 库 。 然 而 非常 活跃 的 AngularJS 社 区 还 构建 了 很 多 可 以 用 来 最 大 限度 地 提升 应 用 能 力 的 
优秀 的 库 。 


本 章 ， 我 们 介绍 AngularUT 库 所 提供 的 几 种 不 同 的 常用 组 件 。 


目前 AngularUI 库 已 经 被 分 割 为 一 系列 模块 ， 所 以 你 可 以 选择 感 兴趣 的 组 件 ， 而 不 必 使 用 整 
个 套件 。 


在 我 们 介绍 这 些 不 同 的 组 件 时 ， 首 先 需 要 确保 安装 了 我 们 要 用 的 每 个 组 件 。 








25.2 ”安装 


对 于 每 个 组 件 , 你 可 以 下 载 单独 的 JavaScript 库 , 然后 将 它 放 置 在 应 用 程序 路 径 中 ; 你 也 可 以 
使 用 Bower? 来 完成 安装 工作 。 在 ng-newsletter com” 上 我 们 建议 使 用 Bower。 本 章 我 们 将 只 会 使 用 
Bower 安 装 每 个 模块 。 


25.3 ui-router 








AngularUI 库 提供 的 最 有 用 的 库 之 一 便 是 ui-router。 它 是 一 个 路 由 框架 , 允许 你 通过 状态 机 
组 织 接 口 ， 而 不 是 简单 的 URL 路 由 。 





25.3.1 安装 
要 安装 ui-router 库 ,你 可 以 下 载 发 布 版 本 "的 文件 或 者 使 用 Bower 安 装 。 





GD http://angular-ui.github.io/ 

© http://angular-ui.github.io/ 

@® http://ng-newsletter.com/ 

由 http://angular-ui.github.io/ui-router/release/angular-ui-router.js 
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要 确保 你 已 经 全 局 安装 了 Bower: 
$ npm install bower -g 


然后 你 就 可 以 使 用 Bower 安 装 angular-ui 库 了 : 





$ bower install angular-ui-Trouter --save 
你 还 要 确保 在 视图 中 链接 这 个 库 : 


<scripttype="text/javascript" 
src="app/bower_components/angular-ui~router/release/angular-ui-router.js"></script> 


同时 还 需要 将 ui .router 作 为 依赖 注入 到 你 的 应 用 中 : 
angular.module('myApp'，[ ui.router ']); 


现在 ， 不 同 于 内 置 的 ngRoute 服 务 ， 由 于 ui-router 基 于 状态 工作 ， 而 不 是 简单 的 url， 因 此 
你 可 以 将 它 般 套 在 视图 中 。 

在 处 理 ngRoute 服 务 时 我 们 不 再 使 用 ng-view， 而 改 为 使 用 ui-view 指 令 。 

在 ui-router 内 处 理 路 由 和 状态 时 ， 我 们 主要 关心 的 是 应 用 程序 处 在 哪个 状态 以 及 Web 应 用 
当前 处 在 哪个 路 由 位 置 。 


<div ng-controller="DemoController"> 
<div ui~view> </div> 
</div> 


和 ngRoute 一 样 ， 定 义 在 任意 给 定 状态 内 的 模板 都 处 在 cdiv ui-view></div> 元 素 内 。 此 外 ， 
每 个 模板 都 可 以 包含 自己 的 ui-view。 这 事实 上 就 允许 你 在 路 由 中 谱 套 视图 。 


为 了 定义 路 由 ， 你 可 以 使 用 .config 方 法 ， 和 和 常见 的 方式 一 样 ， 但 不 是 将 路 由 设置 在 
$routeProvider 上 ， 而 是 将 状态 设置 在 $stateProvider 上 。 












































.config(function($stateProvider, $urlRouterProvider) { 
$stateProvider 
.state('start', { 
Url: 7 Sta7 七 " ， 
七 emplateUr1: 'partials/start.html' 
}) 
}); 


这 一 步 给 状态 配置 对 象 分 配 了 一 个 名 为 start 的 状态 。 这 个 状态 配置 对 象 ， 或 者 说 这 个 
stateConfig 也 有 一 些 与 路 由 配置 对 象 相似 的 选项 ， 让 你 能 够 配置 应 用 程序 的 状态 。 








1. template、 templateUrl、 templateProvider 
在 每 个 视图 上 设置 模板 的 方式 有 三 种 。 


口 template: 一 个 HITML 内 容 字符 串 或 者 返回 HTML 的 函数 。 
口 templateUr1: 一 个 模板 URL 路 径 字 符 串 或 者 是 返回 URL 路 径 字 符 串 的 函数 。 
口 templateProvider: 一 个 返回 HTML 内 容 字 符 串 的 函数 。 


例如 : 


$stateProvider.state('home',{ 
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template: '<hi>Hello {{ name }}</h1i>"' 
1 


2. controller 
和 ngRoute 一 样 ,， 你 可 以 给 已 经 注册 好 的 控制 器 关联 一 个 URL ( 使 用 字符 串 )， 也 可 以 创 妈 
个 控制 器 孔 数 作为 状态 控制 器 。 

如 果 没 有 定义 模板 ( 使 用 上 述 方式 之 一 )， 就 不 会 创建 这 个 控制 器 。 





[由 











3. resolve 

我 们 还 可 以 使 用 resolve 功 能 解析 要 注入 到 控制 器 中 的 依赖 列表 。 在 ngRoute 中 ,resolve 选 
项 允许 你 在 路 由 被 真实 演 染 之 前 解析 promise。 在 angular-route 内 ,对 于 可 以 如 何 使 用 这 个 选项 
更 自由 。 

这 个 resolve 选 项 就 是 一 个 对 象 ， 其 中 键 就 是 要 注入 到 控制 器 中 的 依赖 名 称 ， 而 其 值 就 是 待 
解析 的 factories。 

如 果 传 人 一 个 字符 串 ，angular-route 会 尝试 匹配 一 个 现 有 的 已 注册 的 服务 。 如 果 传 人 一 个 
函数 ， 则 注入 这 个 函数 ， 而 函数 的 返回 值 就 是 依赖 。 如 果 这 个 函数 返回 一 个 promise， 它 会 在 控 
制 右 被 实例 化 之 前 解析 ， 同 时 其 值 ( 就 像 ngRoute ) 会 注入 到 控制 器 中 。 











$stateProvider.state('home', { 
resolve: { 
// 当 结 果 不 是 Promise 时 立即 返回 
person: function() { 
return { 
name: "Ari", 
email: "ari@fullstack.io" 
} 
和 
// 这 个 函数 返回 一 个 promise， 它 会 在 控制 器 实例 化 之 前 解析 
currentDetails: function($http) { 
return $http({ 
method: 'JSONP', 
url: '/current_details' 
}); 
各 
// 还 可 以 在 另 一 个 解析 中 使 用 上 面 返回 的 promise 
facebookId: function($http, currentDetails) { 
$http({ 
method: 'GET', 
url: 'http://facebook.com/api/current_user', 
params: { 
email: currentDetails.data.emails[0@] 
} 
3 
} 
} 


controller: function($scope. person, currentDetails, facebookId) { 
$scope.person = person; 
} 

3 


4.url 
ur1 选 项 可 以 给 应 用 程序 的 状态 分 配 一 个 唯一 的 URL。 这 个 ur1 选 项 提供 了 与 深度 链接 同样 的 
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二 自 








能 ， 它 通过 状态 导航 应 用 ， 而 不 是 简单 地 通过 URL 导 航 。 
个 





机 De) 


基本 路 由 可 以 像 这 样 指定 : 


$stateProvider 
.state('inbox', { 
url: '/inbox', 
template: '<hi>Welcome to your inbox</h1>' 


} 
当 用 户 导 航 到 /inbox 时 ,应 用 会 转换 到 inbox 状 态 ,然后 使 用 模板 内 容 ( <h1>Welcome to your 














inbox</h1>) 填充 主要 的 ui-view 指 令 。 





URL 可 以 接受 一 系列 不 同 的 选项 , 它 还 可 以 在 ur1 中 设置 基本 的 参数 , 就 像 在 ngRoute 中 一 样 : 





$stateProvider 
.state('inbox', { 
url: '/inbox/:inboxld’', 
template: '<hi>Welcome to your inbox</h1i>', 
controller: function($scope, $stateParams) { 
$scope. inboxId = $stateParams.inboxId; 
} 
所 


应 用 会 捕获 作为 URL 第 二 个 组 成 部 分 的 :inboxId。 例 如 ， 如 果 用 户 转换 到 /inbox/1 ， 








$stateParams .inboxId 就 会 变 成 1 ( 因为 $stateParams 为 {inboxId: 1} )。 





如 果 你 喜欢 ， 还 可 以 使 用 不 同 的 语法 : 
url: '/inbox/{inboxId}' 


这 里 路 径 必 须 与 URL 精 确 匹 配 。 和 ngRoute 不 同 ， 如 果 用 户 导 航 到 /inbox/ ， 上 面 的 路 径 能 


够 正常 工作 。 但 是 ， 当 导航 导 到 /inbox 时 ， 上 述 示例 配置 中 的 状态 不 会 被 激活 。 





此 外 ， 你 还 可 以 在 路 径 参 数 内 使 用 正则 表达 式 ， 因 此 你 可 以 设置 一 个 匹配 路 由 的 规则 。 





例如 


// 只 匹配 包含 6 个 十 六 进 制 数字 的 inpox ID 

url: '/inbox/{inboxId: [6-9a-fA-f]{6}}', 

// 或 者 匹配 每 个 URL 中 `/inbox ` 后 面 的 `inboxId` (全 部 捕获 ) 
url: '/inbox/{inboxId:.*} ' 


注意 ， 不 能 在 路 由 内 使 用 正则 捕获 组 ， 因 为 路 由 解析 器 将 无 法 解析 这 个 路 由 。 
其 至 还 可 以 在 路 由 中 指定 查询 参数 : 


// 匹配 诸如 /inbox?sort=ascending 形 式 的 路 由 
url: " /inbox?sort 


5. 谋 套 路 由 
你 可 以 使 用 url 参 数 以 插入 路 由 的 方式 提供 嵌 套 路 由 。 这 让 你 可 以 在 页 面 或 者 模板 内 有 多 个 











ui-views。 例 如 ， 你 可 以 在 上 面 的 /inbox 路 由 内 府 套 独立 的 路 由 。 
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$stateProvider 
.state('inbox', { 

url: '/inbox/:inboxld', 

template: '<div> <hi>Welcome to your inbox</h1i>\ 
<a ui-sref="inbox.priority">Show priority¢/a>\ 
<div ui~view> </div»\ 
/divy" 

controller: function($scope, $stateParams) { 
$scope.inboxId = $stateParams.inboxId 


} 
}) 
.state('inbox.priority', { 
url: '/priority', 
template: '<h2>Your priority inbox</h2>" 


二 
第 一 个 路 由 会 按 预期 匹配 (如 上 所 示 )。 现 在 这 里 有 了 第 二 个 路 由 ， 也 就 是 一 个 匹配 父 路 由 
inbox 之 下 的 子路 由 ( 因为 这 里 我 们 使 用 .语法 时 会 将 它 指定 为 一 个 子路 由 )。 
口 /inbox/1 匹 配 第 一 个 状态 。 
口 /inbox/1/priority 匹 配 第 二 个 状态 。 
使 用 这 种 语法 , 你 可 以 在 父 路 由 内 骨 套 URL。 父 视图 中 的 ui-view 会 解析 priority 收 件 箱 。 








6. params 





params 选 项 是 一 个 参数 名 数组 或 者 是 一 个 正则 表达 式 数组 。 不 能 将 这 个 选项 与 ur1 选 项 联合 


使 用 。 当 状态 被 激活 时 ， 这 些 参数 会 被 填充 到 $stateParams 服 务 中 。 





7. views 
ui-router 的 一 个 强大 的 特性 就 是 可 以 在 一 个 状态 内 设置 多 个 命名 视图 。 在 独立 的 视图 内 ， 
你 可 以 在 独立 模板 中 定义 多 个 要 引用 的 视图 。 





如 果 设 置 了 views 参 数 ， 那 么 状态 的 templateUrl、template 和 templateProvider 
就 会 被 忽略 。 如 果 你 想 在 路 由 中 包含 父 模 板 ， 就 需要 创建 一 个 包含 模板 的 抽象 状态 。 


比方 说 我 们 有 一 个 视图 看 起 来 像 这 样 : 


<div> 
<div ui—~view="filters"></div> 
<div ui—~view="mailbox"></div> 
<div ui~view="priority"></div> 
</div> 


现在 ， 你 可 以 创建 命名 视图 来 填充 每 个 独立 的 模板 。 每 个 子 视图 都 可 以 包含 它 自己 的 模板 、 
控制 嚣 和 使 用 resolve 关 键 字 解析 的 数据 。 


$stateProvider 
.state('inbox', { 
views: { 
'filters': { 
template: '<h4>Filter inbox</h4>', 
controller: function($scope) {} 
hs 
"mailbox': { 
template: 'partials/mailbox.html' 
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} 
'priority': { 
template: '<h4>Priority inbox</h4>', 
resolve: { 
facebook: function() { 
return FB.messages(); 


8. abstract 
抽象 模板 永远 不 能 直接 激活 ， 但 是 可 以 设置 被 激活 的 子 节点 。 
你 可 以 使 用 抽象 模板 提供 一 个 模板 包装 器 来 包 庄 多 个 命名 视图 ,或 者 传递 $scope 对 象 给 子 节 


点 。 你 还 可 以 使 用 它们 来 传递 解析 后 的 依赖 或 者 自 定义 数据 , 或 者 在 同一 urI 下 散 套 多 个 路 由 ( 比 
如 ， 所 有 的 路 由 都 在 /adminURL 之 下 )。 


设置 抽象 模板 与 设置 常规 状态 一 样 ， 区 别 只 在 于 设置 abstract 属 性 : 


$stateProvider 
.state('admin', { 
abstract: true, 
url: '/admin', 
template: ;<div ui-view> </div>’' 


























}) 
.state('admin.index', { 
url: '/index', 
template: '<h3>Admin index</h3>" 
}) 
.state('admin.users', { 
url: '/users', 
七 emplate: "<uUl>...</ul>， 


起 
9. onEnter 、onEXit 


Angular 会 在 用 户 ( 分别) 进入 或 者 离开 视图 时 调用 这 些 回 调 函 数 。 对 于 这 两 个 选项 ， 你 可 
以 设置 希望 调用 的 函数 。 这 些 函 数 可 以 访问 被 解析 的 数据 。 


这 些 回调 函数 让 你 可 以 在 新 视图 上 或 者 进入 男 一 个 状态 时 触发 某 个 行为 ,使 用 它们 可 以 很 好 
地 实现 一 个 “你 确定 吗 ? ”形式 的 模 态 视图 ， 或 者 在 用 户 进 入 这 个 状态 之 前 要 求 用 户 登录 。 


10. data 


你 可 以 附加 任意 数据 给 你 的 状态 配置 对 象 configobject 。 这 个 选项 跟 resolve 属 性 很 像 , 但 
是 它 的 数据 不 会 被 注入 到 控制 器 中 ，promise 也 不 会 被 解析 。 


当 需 要 从 父 状 态 给 子 状态 传递 数据 时 ， 这 个 选项 特别 有 用 。 











25.3.2 事件 
和 ngRoute 服 务 一 样 ，angular-route 服 务 会 在 状态 生命 周期 的 不 同 阶段 触发 不 同 的 事件 。 
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在 应 用 程序 内 可 以 通过 监听 $scope 对 象 的 方式 附加 函数 给 这 些 事件 .以 下 所 有 事件 都 会 触发 
在 $ootScope 上， 因此 可 以 在 任意 $scope 对 象 上 监听 这 些 事 件 。 


1. 状态 改变 事件 
可 以 使 用 如 下 方式 监听 这 个 事件 : 
$scope.$on('$stateChangeStart', 
function(evt, toState, roParams, fromState, fromParams) { 
// 可 以 阻止 这 一 状态 完成 
evt .preventDefault(); 
}); 
这 个 事件 可 能 会 以 如 下 方式 触发 。 
$stateChangeStart 从 一 个 状态 开始 过 渡 到 男 一 个 状态 时 触发 这 个 事件 。 
$stateChangeSuccess 从 一 个 状态 过 渡 到 下 一 个 状态 完成 时 触发 这 个 事件 。 


$stateChangeError 当 过 渡 期 间 发 生 错 误 时 触发 这 个 事件 。 通常, 模板 不 能 被 解析 或 者 解析 
promise 失 败 时 会 引发 错误 。 
2. 视图 加 载 事 件 
ui-router 还 在 视图 加 载 阶 段 提 供 了 事件 。 
$viewContentLoading 视图 开始 加 载 时 ，DOM 被 泻 染 之 前 ， 触 发 这 个 事件 。 
你 可 以 像 这 样 监听 这 个 事件 : 
$scope.$on('$viewContentLoading ' ， 
function(event, viewConfig) { 
// 在 这 里 可 以 访问 所 有 视图 配置 属性 
// 以 及 一 个 特殊 的 “targetView” 属 性 
// viewConfig.targetView 


二 
$viewContentLoaded 在 视图 加 载 完 成 以 及 DOM 泻 染 之 后 触发 这 个 事件 。 














25.3.3 $stateParams 


在 上 面 的 例子 中 ， 我们 一 直 用 $stateParams 从 URL 的 参数 中 辨别 出 不 同 的 参数 选项 。 这 个 
服务 展示 了 如 何 根据 URL 的 不 同 组 成 部 分 处 理 数 据 。 


例如 ， 如 果 在 inbox 状 态 中 有 个 看 起 来 像 这 样 的 URL: 
url: 'inbox/:inboxIld/messages/{sorted}}?from&to' 
然后 用 户 到 达 这 个 路 由 : 


/inbox/123/messages/ascending?from=10&to=20 


























那么 $stateParams 对 象 的 结果 就 是 : 


{inboxId: '123', sorted: 'ascending', from: 10，to: 20} 
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25.3.4 $urlRouterProvider 








和 ngRoute 一 样 , 你 可 以 使 用 路 由 提供 程序 构建 规则 , 规定 当 特 定 的 URL 被 激活 时 会 发 生 什 么 。 
创建 的 这 些 状态 负责 在 不 同 的 URL 中 激活 自身 ， 因 此 不 一 定 需 要 $urlRouterProvider 来 管 
理 激活 和 加 载 状态 。 当 你 想 要 管理 发 生 在 状态 作用 域 之 外 的 行为 时 , 它 就 可 以 派 上 用 场 了 ， 比 如 
重 定 问 或 者 身份 验证 。 
你 可 以 在 模块 配置 函数 中 使 用 $urlRouterProvider。 


when() when 函数 接受 两 个 参数 : 想 要 匹配 的 入口 路 径 和 用 于 重 定向 的 路 径 (或 者 是 在 路 径 
匹配 时 调用 的 函数 )。 


为 了 设置 重 定向 ， 需 要 给 when 方 法 设置 一 个 字符 串 参 数 。 
例如 ， 如 果 想 将 一 个 空 路 由 重 定向 到 /inbox: 





























.config(function($urlRouterProvider) { 
$ur1RouterProvider .when('', '/inbox'); 


直入 

如 果 传 人 一 个 函数 ， 它 会 在 路 径 匹 配 时 调用 。 这 个 处 理 程序 可 能 返回 以 下 三 个 值 中 的 一 个 。 
口 falsy 这 个 值 告诉 $urlRouter 该 规则 不 匹配 ， 同 时 它 应 该 尝试 找到 一 个 不 同 的 状态 来 
匹配 。 如 果 想 要 确保 用 户 可 以 正确 地 访问 一 个 URL， 它 将 很 有 帮助 。 

口 字符 串 ”$urlRouter 会 把 这 个 字符 串 值 当 作 重 定向 的 URL。 

D truthy or undefined 这 个 值 让 $urlRouter 知 道 已 经 处 理 了 URL。 























otherwise() 和 ngRoute 中 的 otherwise( ) 方 法 一 样 ， 这 个 otherwise( ) 方 法 在 没有 其 他 路 
由 匹配 时 发 起 重 定向 。 这 个 方法 是 创建 默认 URE 的 一 种 很 好 的 方式 。 


otherwise( ) 方 法 接受 一 个 参数 : 一 个 字符 串 或 者 函数 。 
如 果 传 人 一 个 字符 串 ， 任 何 无 效 或 者 不 匹配 的 路 由 都 会 重 定向 到 字符 串 指 定 的 URL。 
如 果 传 人 一 个 函数 ， 它 会 在 没有 其 他 路 由 匹配 时 被 调用 ， 同 时 负责 处 理 返回 结果 。 





























.config(function() { 
$urlRouterProvider .otherwise('/'); 
// 或 者 
$urlRouterProvider .otherwisel( function($injector, $location) { 
$location.path('/'); 
}); 
和 


rule() ”如 果 想 要 绕 过 所 有 的 URL 匹 配 ,， 或 者 想 要 在 操作 其 他 路 由 之 前 对 路 由 做 一 些 操作 ， 
可 以 使 用 rule( ) 函数 。 


使 用 rule( ) 函数 时 必须 返回 一 个 有 效 路 径 字 符 串 。 





.config(function($urlRouterProvider) { 
$rulRouterProvider.rule(function($injector, $location) { 
return '/index'; 
上 
1 
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25.3.5 ”创建 一 个 导航 程序 


为 什么 要 使 用 比 内 置 的 ngRoute 更 强大 的 新 路 由 方式 ? 


当 我 们 想 要 为 用 户 创 建 一 个 注册 向 导 的 时 候 ， 就 需要 使 用 ui-router 了 ， 这 是 一 个 非常 合适 
的 应 用 场景 。 








我 们 将 使 用 ui-router 创 建 一 个 快速 注册 服务 ， 它 包含 一 个 控制 器 ， 用 于 处 理 注册 任务 。 
首先 ， 需 要 创建 应 用 视图 : 











<div ng-controller="WizardSignupController"> 
<h2>Signup wizard</h2> 
<div ui—~view> </div> 

/div> 


在 这 个 视图 内 ,我 们 府 入 了 注册 视图 。 接 下 来 ， 在 这 个 注册 向 导 中 还 需要 有 三 个 阶段 。 


口 start: 在 这 个 阶段 ,我 们 获取 用 户 名 并 向 其 介绍 注册 向 导 。 
口 email: 在 这 里 ， 接 受用 户 的 邮件 。 25 
D finish: 此 时 ， 用 户 完成 注册 过 程 ， 我 们 要 向 其 展示 一 个 完整 的 页 面 。 








在 真实 的 应 用 中 , finish 阶 段 应 该 将 注册 资料 发 送 给 服务 器 ,同时 进行 真实 的 注册 
操作 。 在 这 里 ， 由 于 没有 后 端 ， 因 此 暂时 只 显示 这 个 视图 。 


这 个 注册 程序 依赖 于 wizardapp.controllers 模 块 ， 我 们 将 在 其 中 编写 包含 控制 器 : 


WizardSignupController。 


angular.module( 'wizardApp', [ 
'Ui.router', 
"Wizardapp.controllers,' 


] ) ; 





WizardSignupController 简 单 地 提供 了 $scope.user 对 象 , 在 注册 过 程 以 及 注册 行为 中 , 我 
们 都 会 使 用 这 个 对 象 。 


angular.module('wizardapp.controllers'，[]) 
.Controller('WizardSignupController '， 
function($scope, $state) { 
$scope.user = {}; 
$scope.signup = function() {} 





})3 
向 导 程 序 逻 辑 履 盖 了 大 部 分 工作 。 你 可 以 将 这 些 逻 辑 设置 到 应 用 的 config() 郴 数 中 : 





angular.module('wizardApp'，[ 
"ui.Trouter ' ， "Wizardapp.controllers' 
] ) 
.config(function($stateProvider, $urlRouterProvider) { 
$stateProvider 
.state('start', { 
Url: "/step. 4141”, 
/templateUrl: 'partials/wizard/step_1.html' 
}) 
.state('email', { 
Url: /step 2", 
templateUrl: 'partials/wizard/step_2.html’ 
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}) 
.state('finish', { 
url: '/finish', 
templateUrl: 'partials/wizard/step_3.html' 
3 
1 


设置 这 些 选项 之 后 ， 基 本 流程 就 全 部 完成 了 。 现 在 ， 如 果 用 户 导 航 到 路 由 /step_1， 他 们 将 
被 定 疝 到 流程 的 起 点 。 尽管 整 个 流程 也 可 以 都 发 生 在 根 URL 上 ( 即 /step_1 ), 但 你 可 能 更 希望 将 
它们 放 在 子路 由 中 (例如 /wizard/step_1 )。 


为 此 ， 只 需要 设置 一 个 包装 其 他 步骤 的 abstract 状 态 就 可 以 了 。 














.config(function($stateProvider, $urlRouterProvider) { 
$stateProvider 
.state('wizard', { 
abstract: true, 
url: '/wizard', 
template: '<div> <div ui-~view> </div> </div>' 
}) 
.State('wizard.start', { 
url: '/step_1', 
templateUrl: 'partials/wizard/step_1.html' 
}) 
.State('wizard.email', { 
Url:; "/step.2"; 
templateUrl: 'partials/wizard/step_2.html' 
}) 
.state( 'wizard. finish', { 
url: '/finish', 
templateUrl: 'partials/wizard/step_3.html' 
由) 
下 


现在 , 这 些 路 由 不 再 定义 在 顶级 路 由 中 了 , 你 可 以 将 它们 (子路 由 ) 安 全 地 骸 套 在 /wizard 
URL 内 。 


此 外 ， 我 们 还 想 在 注册 程序 的 尾部 附加 一 个 功能 : 在 父 控制 器 WizardSignupController 上 
调用 signup 函 数 。 我 们 只 需 在 向 导 程 序 的 尾部 设置 一 个 控制 器 来 调用 $scope 上 的 函数 就 行 了 。 
由 于 整个 向 导 程 序 都 封装 在 Wi zardSignupController 中 ， 这 就 表示 可 以 正常 使 用 作用 域 柑 套 作 
用 域 属性 。 

.state( 'wizard. finish',{ 

url: '/finish', 
templateUrl: 'partials/wizard/step_3.html', 


controller: function($scope) { 
$scope.signup(); 


























} 
有 


25.4 ui-utils 











UI 工 具 库 是 一 个 功能 强大 的 实用 工具 包 , 它 提供 了 大 量 可 用 于 你 的 项 目 中 的 自 定义 扩展 , 而 
你 无 需 重新 造 轮子 。 


下 面 展 示 了 ui-utils 库 所 提供 的 一 些 值得 注意 的 特性 。 
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Py 
25.4.1 安装 
$ bower install --save angular-ui-utils 


我 们 需要 确保 在 HTML 模 板 中 引入 了 这 个 库 。ui-utils 库 的 每 个 组 件 都 是 作为 独立 模块 构建 
的 ， 因 此 需要 单独 引入 每 个 组 件 。 


25.4.2 mask 


当 想 要 接受 一 个 信用 卡 或 者 电话 号 码 时 (或 者 是 其 他 任何 特殊 格式 的 信息 )， 你 可 以 提供 一 
个 整洁 的 UI 来 告诉 用 户 提供 干净 的 信息 。 


你 需要 确保 在 HTML 中 引入 mask. js 库 : 























<script type="text/javascript" 
src="app/bower_components/angular-ui~utils/modules/mask/mask.js">¢/script> 


然后 将 ui-mask 作 为 依赖 设置 给 应 用 : 
angular .module( 'myApp',['ui.mask']) 
现在 ， 可 以 使 用 ui-mask 指 令 来 指定 输入 遮 昌 了 。ui-mask 指 令 接受 下 列 形式 的 格式 字符 串 : 


口 A 一 一 任意 字母 ; 
口 9 一 一 任意 数字 ; 
Dx 任意 字母 数字 字符 。 


例如 ， 在 一 个 input 中 格式 化 一 个 信用 卡号 码 ，ui-mask 指 令 的 设置 看 起 来 可 能 像 这 样 : 














<input name="ccnum" ui-mask="9999999999999999" ng-model="user.cc" placeholder="Credit card 
number" /> 


除非 所 有 验证 都 满足 了 ， 否 则 Angular 视 输入 为 无 效 ， 而 ui-mask 与 此 类 似 。 


注意 ， 上 面 这 个 input 只 支持 输入 遮 音 匹配 9999-9999-9999-9999 的 信用 卡 。 稍 微 
做 点 工作 就 可 以 支持 其 他 类 型 的 卡 了 。 








同样 ， 你 可 以 使 用 字符 或 者 任意 字母 数字 字符 格式 化 一 个 输入 字段 。 


25.4.3 ui-event 
和 其 他 模块 一 样 ， 需 要 在 HITML 中 引入 event . js 库 : 


<script type="text/javascript" 
src="app/bower_components/angular-ui~utils/modules/event/event.js">¢/script> 


然后 还 需要 将 ui .event 作 为 应 用 的 依赖 引入 : 
angular .module( 'myApp', ['ui.event']) 


当 想 要 处 理 AngularJS 自 身 不 支持 的 事件 时 ，ui-event 模 块 极其 好 用 。 例 如 ， 如 果 和 希望 用 户 
双击 某 个 元 素 或 者 处 理 一 个 blur 事 件 ， 就 必须 编写 一 个 包装 函数 来 包装 原生 浏览 圳 事件 double 
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click。 而 ui-event 模 块 就 是 一 个 简单 的 原生 事件 包装 器 ， 因 此 你 可 以 使 用 它 来 啊 应 任意 元 素 上 
由 浏览 器 触 发 的 事件 。 

例如 , 你 想 在 用 户 双击 另 一 个 图 像 之 后 显示 一 个 图 像 。 只 需 设置 ui-event 指 令 为 一 个 由 事件 
名 称 和 该 元 素 捕获 到 对 应 事件 时 要 采取 的 行为 组 成 的 键 - 值 对 即 可 。 

比如 ， 在 HTML 中 ， 你 可 以 在 控制 器 中 设置 一 个 双击 事件 qbclick 调 用 showImage( ) 函数 : 











<imgsrc="/images/ui/ginger.png" ui-event="{dqblclick:'showImage()'}” /> 
在 控制 器 中 ， 可 以 在 作用 域 对 象 上 像 编 写 标 准 的 方法 一 样 编写 对 应 的 方法 : 


.controller('DemoController', function($scope) { 
$scope.showImage = function() { 
$scope.shouldShowImage = !$scope.shouldShowImage; 


} 
1 


由 于 这 个 ui-event 指 令 就 是 一 个 简单 的 原生 浏览 器 事件 包装 器 ,因此 你 可 以 在 任意 元 素 上 用 
它 来 模拟 任意 浏览 器 事件 。 

例如 ， 如 果 想 捕获 一 个 元 素 的 blur 或 者 focus 事 件 ， 也 可 以 使 用 ui-event 指 令 。 

比方 说 想 针 对 表单 输入 提供 一 些 有 用 的 提示 。 你 可 以 在 focus 事 件 和 blur 事 件 上 设置 相应 的 
行为 来 显示 这 些 帮助 提示 。 

例如 ， 如 果 你 有 一 个 包含 name 和 email1 输 入 字段 的 表单 ， 可 以 给 blur 和 focus 事 件 附 加 一 个 
函数 来 在 这 些 输入 字段 上 显示 帮助 信息 。 


<formname=" form"> 
<input type="text" name="name" placeholder="Your name" 
ui-event="{focus: 'showNameHelp=true', 
blur: 'showNameHelp=false'}" /> 
<input type="email" name="email" placeholder="Your email" 
ui-event="{focus: 'showEmailHelp=true', 
blur: 'showEmailHelp=false'}" /> 
</formy》 


在 输入 字段 上 设置 这 些 事 件 时 ， 还 可 以 依据 用 户 关注 的 字段 来 显示 相应 的 帮助 信息 〈 使 用 
ng-show 和 ng-hide )。 



































25.4.4 ui-format 
同样 需要 确保 在 HTML 中 引入 format .js 库 : 


<script type="text/javascript" 
src="app/bower_components/angular-ui~utils/modules/format/format.js"></script> 


然后 设置 ui . format 为 应 用 的 依赖 : 


angular .module( 'myApp',['ui.format']) 


format 库 是 一 个 以 不 同方 式 处 理 字 符 串 标记 的 包装 器 。 它 让 你 能 够 直接 处 理应 用 中 被 认为 是 
变量 的 标记 。 
我 们 可 以 使 用 这 个 格式 化 库 中 的 标记 替换 功能 ， 而 不 是 数组 或 者 键 值 对 形式 的 JavaScript 对 
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象 。 例如 : 
{{ "Hello$@" | format: 'Ari' }} 


或 者 ， 也 可 以 在 作用 域 中 将 名 称 绑 定 给 变量 ， 然 后 使 用 format 库 以 一 个 干净 的 格式 呈现 它 。 
比方 说 有 一 个 看 起 来 像 这 样 的 控制 句 : 





angular.module('myApp'，['ui.format']) 
.Controller('FormatController', function($scope) { 
$scope.name = 'Ari'; 


有 

你 还 可 以 格式 化 输入 字段 以 防范 在 $scope 上 绑 定 变量 : 

尽管 这 段 代 码 并 不 是 特别 有 趣 ( 这 是 Angular 的 一 项 创造 性 的 功能 ), 但 当 你 想 要 在 键 - 值 的 基 
础 上 操作 文本 时 它 就 变 得 很 有 趣 了 。 

例如 ， 你 可 以 基于 对 象 的 键 来 格式 化 一 个 字符 串 。 比 方 阅 你 有 一 个 带 有 name 和 email 属 性 的 
对 象 : 

.controller('FormatController', function($scope) { 

$scope.person = { 


name: 'Ari', 
email: 'ari@fullstack.io' 




















}; 
下 


接 下 来 可 以 修改 HTML, 引入 作为 tokens 的 对 象 键 , 这 允许 你 改变 匹配 标记 来 防范 把 键 当 作 


tokens: 





{{ "Hello: name. Youre mail is: email" | format: person }} 


format 模 块 在 处 理 翻 译 或 者 支持 i18n 时 特别 有 用 ( 更 多 关于 翻译 的 信息 ， 请 参考 第 27 章 )。 
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移动 应 用 并 不 是 软件 开发 人 员 的 下 一 个 领域 一 一 它们 已 经 来 了 。 现在 已 经 有 12 亿 移动 Web 应 
用 用 户 了 ,而 且 这 个 数字 还 在 不 断 增长 ( 维基 百科 ”)。 不 久之 后 , 移动 设备 的 数量 将 会 超过 地 球 
上 人 口 的 数量 。 按 照 移动 设备 增长 的 速度 ， 估 计 到 2017 年 将 有 51 亿 人 使 用 移动 电话 。 

对 于 我 们 这 些 应 用 开发 者 而 言 ， 如 果 想 要 跟 上 时 代 ， 掌 握 移动 开发 技术 很 重要 。 对 于 
AngularJS ， 在 Angular 团 队 和 社区 的 努力 下 已 经 极 大 程度 地 支持 了 移动 设备 。 

本 章 将 通过 两 种 不 同 的 方式 为 我 们 的 应 用 程序 用 户 提供 移动 体验 : 
口 响应 式 Web 应 用 ; 
口 基于 Cordova 的 原生 应 用 。 














26.1 响应 式 Web 应 用 


就 Angular 而 言 , 支持 移动 设备 最 简单 的 方式 就 是 使 用 已 知 和 熟悉 的 工具 一 一 HTML 和 CSS 来 
创建 兼容 手机 的 Angular 应 用 。 由 于 Angular 本 身 就 是 基于 HTML 的 ， 创 造 响应 式 设计 和 交互 其 实 
只 需要 构建 一 个 支持 不 同 设备 的 架构 就 够 了 。 





26.2 ”交互 


对 于 桌面 应 用 ， 通 过 ng-click 和 熟悉 的 指令 就 能 够 创建 交互 式 应 用 。 


从 Angular 1.2.0 开 始 ， 我 们 还 可 以 使 用 新 的 ngTouch 模 块 来 使 用 touch 事 件 。 由 于 ngTouch 并 
没有 内 置 在 核心 的 Angular 库 中 ， 因 此 需要 先 安装 它 。 








26.2.1 安装 


可 以 使 用 好 几 种 方式 安装 ngTouch。 而 安装 ngTouch 模 块 最 简单 的 方式 就 是 从 angularjs” 网 站 
下 载 它 的 源码 。 


找到 下 载 部 分 的 extras ， 然 后 可 以 下 载 并 将 ng-touch .js 文件 存储 在 应 用 可 访问 的 位 置 。 
或 者 ， 也 可 以 使 用 Bower 安 装 angular-touch : 


$ bower install angular-touch --save 





QD http://en.wikipedia.org/wiki/List_of countries by number_ of mobile phones in use 





© http://angularjs.org/ 
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无 论 使 用 哪 种 方式 ， 都 需要 在 你 的 index.html 中 以 脚本 的 方式 引入 这 个 库 : 
<Script src="/bower_components/angular-touch/angular-touch.js"></Sscript> 


最 后 ， 还 需要 以 依赖 的 方式 在 你 的 应 用 中 引入 ngTouch : 





angular.module( 'myApp', ['ngTouch']); 


现在 ， 就 可 以 开始 使 用 ngTouch 库 了 。 


26.2.2 ngTouch 


处 理 点 击 事件 时 , 移动 设备 浏览 器 与 桌面 浏览 絮 的 工作 方式 略 有 不 同 。 移动 设备 首先 会 检测 
到 一 个 tap 事 件 ， 然 后 等 待 300 毫 秒 去 检测 其 他 点 击 ( tap ) 事件 ( 比如 ， 等 待 发 现 用 户 是 否 在 双 
击 设备 )。 在 这 个 延 时 之 后 ， 浏 览 右 才 会 触发 点 击 事件 。 

这 一 延迟 可 能 让 人 感觉 到 应 用 反应 非常 迟钝 -除了 检测 click 事 件 , 你 也 可 以 检测 touch 事 件 。 

ngTouch 库 通过 ng-click 指 令 为 我 们 完美 地 处 理 了 这 一 功能 ， 同 时 它 还 负责 调用 正确 的 点 击 
事件 。 也 就 是 说 会 调用 所 谓 的 快速 点 击 事件 。 

在 快速 点 击 被 调用 之 后 ， 才 会 调用 浏览 器 的 延 时 点 击 ， 这 会 触发 一 个 双击 行为 。 
ngTouch 负 责 在 ng-click 事 件 上 移 除 这 个 浏览 器 延 时 。 


在 移动 设备 上 的 浏览 器 中 使 用 ngclick 指 令 的 方式 ， 与 在 桌面 浏览 器 中 的 方式 完全 相同 : 














<button ng-click="save()">Save</buttony> 

ngTouch 还 引入 了 两 个 新 指令 : swipe 指 令 。swipe 指 令 人 允许 我 们 捕获 用 户 滑 屏 行 为 ， 不 论 是 
从 左 侧 还 是 往 右 侧 。swipe 指 令 非 常 有 用 ， 它 可 以 让 用 户 通过 滑动 浏览 器 相册 ， 或 者 导航 到 应 用 
的 其 他 部 分 。 

ngSwipeLeft 指 令 检 测 元 素 从 右 向 左 滑动 ， 而 ngSwipeRight 指 令 检 测 元 素 从 左 向 右 滑动 。 


ngSwipex* 指 令 有 用 的 特性 之 一 便 是 ， 它 们 既 能 用 于 基于 touch 事 件 的 设备 ， 也 能 用 
于 鼠标 点 击 和 拖 搜 。 


使 用 ngswipe* 指 令 很 容易 。 比 方 说 有 一 个 邮件 列表 , 我 们 希望 它 如 同 流行 的 手机 邮件 客户 端 
MailboxApp 一 样 ， 能 够 显示 针对 每 封 邮件 的 操作 。 


在 这 个 元 素 列 表 上 使 用 swipe 指 令 时 可 以 很 容易 实现 这 一 功能 。 在 显示 邮件 列表 时 ， 你 可 以 
在 特定 的 邮件 条 目 上 启用 某 个 方向 的 滑 屏 ， 来 启动 显示 行为 。 


在 显示 邮件 条 目 时 ， 可 以 从 反方 向 实现 隐藏 行为 ， 如 图 26-1 所 示 。 


<U1》> 
<1i ng-Tepeat= "mail in emails"> 
<div ng-show="!mail.showActions" ng-swipe-left="mail.showActions=true"> 

<div class="from"> 
From: <span>{{ mail.from }}<¢/span> 

</div> 

<div class="body"> 
{{ mail.body }} 

</div> 
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</div> 
<dqiv ng-show="mail.showActions" ng-swipe-right="mail.showActions=false"> 


<Uul class="actions"> 
<1i><button>Archive</button> </1i> 
<1li><button>Trash</button> </1i> 
</ul> 


</div> 


</l1i> 
</ul> 


ann Salpe directves, 





Fromr Ari 
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图 26-1  Swipe 指 令 示 例 


26.2.3 $swipe 服 务 
可 以 直接 使 用 $swipe 服 务实 现 更 多 自 定义 的 基于 touch 的 动画 。 这 个 $swipe 服 务 简化 了 拖 搜 





滑动 行为 的 细节 。 


$swipe 服 务 有 一 个 独特 的 bind( ) 方 法 。 这 个 bind( ) 方 法 接受 一 个 要 绑 定 swipe 行 为 的 元 素 作 
为 参数 ， 以 及 一 个 带 有 四 个 事件 处 理 程序 的 对 象 。 


这 些 事件 处 理 程序 需要 一 个 参数 对 象 ， 该 对 象 包含 一 个 坐标 对 象 ， 就 像 : {x: 200, y: 300]。 
这 四 个 事件 处 理 程序 分 别处 理 以 下 事件 。 





@ start 


start 事 件 在 mousedown 或 者 touchstart 事 件 上 触发 。 触 发 这 一 
控 touchmove 和 mousemove 事 件 。 而 这 些 事件 只 会 在 移动 的 距离 超过 


(为 了 防止 意外 的 
一 旦 超过 这 








口 如 果 水 平 埠 


@@ move 


实际 上 ， 在 这 








事件 之 后 ，$swipe 服 务 会 监 
十 特定 (一 小 段 ) 距离 时 触发 





滑动 )。 


个 特定 的 距离 ， 下 面 两 个 事件 之 一 就 会 发 生 : 
口 如 果 垂 直 


首 量 大 于 水 平 增 量 ， 浏 览 絮 将 它 作 为 深 动 事件 处 理 ; 
兽 量 大 于 垂直 增 量 , 则 被 当 作 滑动 行为 ,然后 它 会 设置 nove 和 和 end 事件 跟踪 swipe 行 为 。 











个 过 程 中 ，move 事 件 只 会 在 $swipe 服 务 确定 该 操作 是 一 个 滑 屏 操 作 之 后 调用 





mousemove 和 touchmove 事 件 。 


@ end 


end 事 件 在 touchend 或 者 mouseup 事 件 之 后 ， 并 且 move 事 件 被 触发 后 触发 。 
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@ cancel 

cancel 事 件 会 调用 touchcancel 事 件 或 者 在 start 事 件 之 后 开始 深 动 时 触发 。 

例如 ,我 们 可 以 创建 一 个 指令 , 在 可 以 控制 投影 仪 的 屏幕 上 的 幻灯 片 之 间 滑 动 。 为 了 在 手机 
设备 上 处 理 滑 动 操作 ， 可 以 使 用 $swipe 服 务 来 处 理 如 何 显示 UI 层 的 自 定义 逻辑 。 











angular .module( 'myApp') 
.directive( 'mySlideController', ['$swipe', function($swipe) { 
return { 
restrict: 'EA', 
link: function(scope,ele,attrs,ctr1) { 
var startX, pointxX; 
$swipe.bind(ele, { 
'start': function(coords) { 
startX = coords.x; 
pointX = coords.y; 


'move': function(coords) { 
var delta = coords.x - pointx; 
YY 

} 


‘end': function(coords) { 
pA 
} 


'cancel': function(coords) { 


HA 


26.2.4 angular-gestures 和 多 点 触 控 手 势 

angular-gestures 是 一 个 Angular 模 块 ， 它 让 我 们 可 以 处 理 Angular 应 用 中 的 多 点 触 控 行 为 。 
它 基于 非常 流行 并 经 过 良好 测试 的 Hammerjs" 库 。 

Hammerjs 库 提供 了 一 系列 常见 的 触 屏 事件 : 


口 Tap ; 
口 DoubleTap ; 
口 Swipe ; 








口 Drag ; 
口 Pinch ; 
口 Rotate。 
angular-gestures 人 允许 我 们 在 使 用 Angular 指 令 时 使 用 这 些 事件 。 例 如 ， 以 下 所 有 指令 都 是 
可 用 的 : 
DQ hmDoubleTap: 'doubletap'; 
DQ hmDragStart: 'dragstart'; 











GD http://eightmedia.github.io/hammer.js/ 
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DQ hmDrag: 'drag'; 

DQ hmDragUp: 'dragup'; 

口 hmDragDown: 'dragdown' 

口 hmDragLeft: 'dragleft'; 

DQ hmDragRight: 'dragright'; 
DQ hmDragEnd: 'dragend'; 

D hmHold: "hold ' ; 

DQ hmPinch: "pinch ' ; 

DQ hmPinchIn: "pinchin '; 

DQ hmPinchOut: "pinchout ' ; 

口 hmRelease: 'Telease ' ; 

口 hmRotate: 'Totate ' ; 

DQ hmSwipe: "swipe '; 

DQ hmSwipeUp: "swipeup ' ; 

DQ hmSwipeDown: "swipedown ' ; 
DQ hmSwipeLeft: 'swipeleft'; 
DQ hmSwipeRight: 'swiperight'; 
DQ hmTap: 'tap’'; 

D hmTouch: 'touch'; 

D hmTransformStart: "transformstart ' ; 


口 hmTransform: “transform ' ; 





口 hmTransformEnd: "transformend ' 。 


26.2.5 安装 angular-gestures 
为 了 在 应 用 中 安装 angular-gestures 库 ， 需 要 在 页 面 中 引入 getstures.js 库 (或 者 是 


gestures.min.js 库 )。 
你 可 以 直接 从 Github" 下 载 gestures .js 文件 ,或 者 也 可 以 使 用 Bower 进 行 安装 。 
要 使 用 Bower 安 装 angular-gestures， 可 以 使 用 如 下 命令 安装 它 : 
$bower install --save angular-gestures 


最 后 ， 还 要 设置 angular-gestures 作 为 Angular 应 用 的 依赖 ， 


angular .module( 'myApp', ['angular-gestures' ]); 











26.2.6 ”使 用 angular-gestures 


至 此 ，Angular 手 势 真 的 很 容易 使 用 了 。 手 势 就 是 Angular 指 令 ， 因 此 在 应 用 中 使 用 它们 与 使 
用 任何 其 他 指令 的 方式 一 样 。 














GD https://github.com/wzr1337/angular-gestures 
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比方 说 你 想 允 许 用 户 旋 转 ， 收 缩 和 放大 相册 中 的 照片 。 就 可 以 使 用 Hammerjs 库 来 处 理 这 些 





这 里 有 一 个 例子 ,我 们 将 只 为 元 素 的 双击 操作 设置 一 个 随机 的 变换 。 要 做 到 这 一 点 ， 需 要 使 
用 hm-tap 指 令 来 设置 HTML。 


<div id="photowrapper"> 
<div class="cardProps" hm-taps="tapped($event)"> 
<div class="tradingcard"> 
<img src="/img/ari.jpeg" alt="" /> 
<span>Arix/span> 
</div> 
《<div class="tradingcard"> 
<img src="/img/nate. jpeg" alt="" /> 
<span>Natex</span> 
</div> 
《</div> 
jdiv> 


这 里 除了 有 一 个 名 为 hm-tap 的 指令 之 外 ,实际 上 HTML 中 并 没有 什么 非常 特别 的 东西 。 当 有 
人 点 击 图 片 时 ，angular-gestures 指 令 会 处 理发 生 的 事情 。 


Hammer.js 指 令 也 可 以 接受 Angular 表 达 式 ， 因 此 你 可 以 在 表达 式 内 部 调用 函数 或 者 
执行 操作 ( 比如 ng-click ) 以 及 使 用 Hammerjs 选 项 。 


在 上 面 的 例子 中 ， 调 用 了 定义 在 $scope 对 象 上 的 tapped( ) 函数 。 我 们 将 这 个 函数 定义 为 : 


$scope.tapped = function($event) { 

var ele = $event.target; 

var x = Math.floor(Math.random() * 200) + 1， 
y = Math.floor(Math.random() * 100) + 1, 
z = Math.flooe(Math.random() * 6) + 1, 
rot = Math.floor(Math.random() * 360) + 1; 

$(ele).css({ 
'transform': "translate3d(" + xX + "px," +Yy + "px," + 2Z + "px)" + "rotate(" + rot + 


"geg)" 
1 
} 
angular-gestures 库 通过 提供 一 个 叫做 $event 的 特殊 参数 让 我 们 能 够 访问 事件 对 象 。 可 以 
使 用 事件 对 象 的 target 属 性 ($event .target ) 确定 用 户 点 击 的 是 哪个 元 素 ， 然 后 可 以 在 元 素 上 
疯狂 地 使 用 各 种 优雅 的 特效 。 









































26.3 ” ”Cordova 中 的 原生 应 用 程序 


Cordova 是 一 个 免费 、 开 源 的 框架 , 它 允 许 我 们 使 用 标准 的 Web API 而 不 是 原生 代码 来 创建 移 
动 应 用 。 它 还 允许 我 们 使 用 HTML 、JavaScript、CSS 和 AngularJS 编 写 移动 应 用 程序 ， 而 不 是 编写 
Objective-C 或 者 Java (分别 代 表 iOS 和 Android 平 台 )， 如 图 26-2 所 示 。 


Cordova 通 过 JavaScript 暴 露 了 很 多 可 访问 原生 设备 的 API， 这 就 允许 我 们 运行 设备 特定 的 操 
作 ， 比 如 获取 本 地 位 置 或 者 使 用 相机 功能 。Cordova 本 身 就 被 设计 为 基于 插件 的 架构 ， 因 此 你 可 
以 使 用 Cordova 社 区 提供 的 插件 ， 比 如 本 地 音频 访问 或 者 条 形 码 扫描 插件 。 
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但 妆 poow 


Apache Cordova is a platform 


全 for building native mobile 
applications using HTML, CSS 
and JavaScript 


8 About Apache Cordova™ 


图 26-2 Cordova 
使 用 Cordova 的 一 个 好 处 便 是 可 以 复 用 Angular 应 用 的 代码 来 支持 移动 环境 。 当 然 ， 还 有 一 些 
问题 需要 处 理 ， 比 如 性 能 问题 和 原生 组 件 访问 问题 等 。 
安装 
Cordova 本 身 是 作为 一 个 npm 包 分 发 的 ， 因 此 可 以 使 用 npm 来 安装 它 ， 如 图 26-3 所 示 。 





图 26-3 ”安装 Cordova 


如 果 你 还 没有 安装 npm， 首 先 确保 安装 了 node。 关 于 安装 NodeJS 的 更 多 信息 
请 阅读 第 34 章 。 


$ npm install -g cordova 


Cordova 程 序 包 包 含 一 个 用 于 创建 应 用 并 让 其 可 以 使 用 Cordova 的 生成 器 。 











26.4 Cordova 入 门 


Cordova 人 入门 很 简单 。 首 先 要 使 用 生成 器 创建 Cordova 应 用 的 起 点 。 放 我 们 来 看 一 个 GapApp 
应 用 。 


生成 器 接受 3 个 参数 。 
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口 project-directory ( 必 填 参数 )。 
这 是 要 创建 应 用 的 目录 。 

口 package-id 

项 目 ID (reverse-domain 风 格 的 包 名 )。 





D name 

包 名 称 〈 应 用 程序 名 称 )。 

$ cordova create gapapp io.fullstack.gapapp "GapApp" 

这 行 命令 设置 了 一 个 叫做 gapapp 的 目录 (通过 第 一 个 参数 标识 )， 它 带 有 一 个 叫做 
io.fullstack.gapapp 的 包 ID， 然 后 项 目 名 为 GapApp ， 如 图 26-4 所 示 。 


@ee 国 gapapp 
ED Emm (7) (Sr) [Br] Q 

















merges platforms plugins ww 





图 26-4 ”Cordova 文 件 结构 


Cordova 团 队 将 Cordova 分 解 成 了 插件 ， 因 此 无 需 包 含 那些 不 用 构建 的 平台 ; 这 一 分 解 操 作 让 
开发 的 应 用 支持 其 他 平台 变 得 更 容易 ,当然 ,也 意味 我 们 需要 将 感 兴趣 的 开发 平台 添加 到 项 目 中 。 

对 于 上 面 这 个 项 目 ， 你 可 以 假定 其 余 的 这 些 命令 都 运行 在 项 目 目录 内 : 

$ cd gapapp/ 

比如 我 想 构 建 一 个 iOS 项 目 ( 对 于 其 他 平台 ,过程 是 一 样 的 )。 为 了 添加 iOS 平 台 , 使 用 如 下 
Cordova 命 令 简单 地 将 它 添加 到 项 目 中 即 可 : 








$ cordova platform add ios 


为 了 让 这 条 命令 工作 起 来 ， 需 要 确保 使 用 XCode 安 装 了 iOS SDK。 可 以 在 
developer.apple.com" 下载 iOS SDK 和 XCode。 


设置 好 之 后 ， 就 可 以 构建 基础 应 用 了 : 





$ cordova build ios 
现在 ,由 于 苹果 公司 的 开发 者 工具 有 些 复杂 , 我 们 不 得 不 自己 构建 应 用 , 然后 让 它 运行 在 本 
地 的 iOS 模 拟 需 中 。 














GD https://developer.apple.com/ 
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让 我 们 先 来 浏览 一 下 应 用 的 目录 ,这 里 会 看 到 一 个 平台 目录 。 在 里 面 ， 
这 个 目录 就 是 由 上 面 的 platform add 命 令 创 建 的 ， 如 图 26-5 所 示 。 





会 发 现 一 个 ios/ 目 录 ， 

















@ee 年 ios 
4 上 ] :: CTEMNEDEDICNVE 








cordova Cordovalib GapApp {GapApp.xcodeproj ) 


图 26-5 生成 的 项 目 


在 XCode 中 , 打开 使 用 上 述 命令 创建 的 项 目 。 确 保 在 XCode 顶 部 的 平台 标识 中 显示 了 模拟 器 ， 
如 图 26-6 所 示 。 


四 日 日 


访 国 | 入 GapApp ， 顺 iphone Retina (3.5-inch) 








副 守 AS W|I4P 
入 网 GapApp <?xmL 
1 target, iOS SDK 7.0 <widgel 
| <Ne 
加 On Mm <dt 

PL www 
和 A 

CordovaLib.xcodeproj < 

* 年 ltarget, iOS SDK 7.0 
je | Classes </i 


图 26-6” 山 入 到 XCode 中 
点 击 运 行 。 





作 后 , 应 该 能 够 看 到 这 个 基础 的 Cordova 应 用 开始 运行 在 模拟 咒 中 , 如 图 26-7 所 示 。 


APACHE CORDOVA 
| DEVICEISREADY 





图 26-7 标准 Cordova 应 用 
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26.4.1 ”Cordova 开 发 流程 


Cordova 源 自己 经 被 Apache 基 金 会 接受 的 PhoneGap 项 目 。 这 个 项 目 本 身 就 包含 了 我 们 将 用 来 
与 原生 应 用 交互 的 命令 行 工具 ， 从 创建 到 部 署 。 








26.4.2 平台 
至 此 ， 我 们 已 经 创建 了 应 用 ， 并 且 添 加 了 平台 (在 这 个 例子 中 是 iOS )。 
Cordova 应 用 支持 哪些 平台 ， 取 决 于 我 们 的 开发 环境 。 在 Mac 上 ， 可 用 的 平台 有 : 


口 1DS ; 

口 Android ; 

口 Blackberry10 
口 Firefox OS。 


在 Windows 机 器 上 ， 可 以 开发 以 下 平台 应 用 : 


口 Android ; 

口 Windows Phone 7; 
口 Windows Phone 8 ; 
口 Windows8; 

口 Blackberry10 

口 Firefox OS 。 


如 果 不 知 道 哪些 平台 可 用 ,可 以 运行 platforms 命 令 来 检查 哪些 平台 可 用 并 且 已 经 安装 好 了 : 











$ cordova platforms 1s 
要 添加 一 个 平台 ， 可 以 使 用 platform add 命 令 (正如 上 面 那样 ): 
$cordova platform add android 


要 移 除 一 个 平台 ， 可 以 使 用 rm 或 者 remove 命 令 : 


$cordova platform rm blackberry10 


26.4.3 ”插件 


Cordova 建 立 在 令 人 难以 置信 的 模块 化 基础 之 上 ， 它 希望 用 户 使 用 搬 件 系统 来 安装 所 有 非 核 
心 组 件 。 要 给 项 目 添加 一 个 插件 ， 使 用 plugin add 命令 可 








$ cordova plugin add\ 
https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git 


然后 可 以 使 用 plugins 1s 命 令 列 出 当前 已 安装 的 插件 : 








$cordova plugins 1s 
[ 'org.apache.cordova.geolocation' |] 


最 后 ， 可 以 使 用 plugin rm 命令 移 除 插件 : 





$cordova plugins rm org.apache.cordova.geolocation 
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26.4.4 构建 





默认 情况 下 ，Cordova 会 创建 一 个 项 目 骨 架 ， 在 项 目 目 录 的 www/ 目 录 中 存放 Web 视 图 文件 。 
当 使 用 Cordova 构 建 这 个 项 目 时 ， 它 会 复制 这 些 文件 ， 并 将 它们 存放 到 平台 特定 的 目录 中 。 


要 构建 应 用 ， 可 以 使 用 另外 一 个 Cordova 命 令 

















build 命 令 : 





$ cordova build 
这 里 无 需 指 定 任 何 要 构建 的 平台 ， 这 个 命令 会 构建 项 目 中 列 出 的 所 有 平台 。 
你 也 可 以 通过 只 构建 指定 平台 的 方式 限定 作用 域 ， 比 如 : 


$cordova build ios 
$cordova build android 








使 用 puild 命 令 时 要 确保 设置 了 必要 的 平台 特定 的 代码 ， 这 样 应 用 才能 被 编译 。 实 
际 上 ， 与 调用 cordova prepare 和 cordova compile 时 所 做 的 事情 一 样 。 


26.4.5 ”模拟 和 运行 
Cordova 还 可 以 运行 模拟 器 以 模拟 在 设备 上 运行 应 用 。 当 然 ， 只 能 在 安装 了 模拟 器 并 设置 本 
地 开发 环境 的 情况 下 才能 这 么 做 。 


假设 你 已 经 在 开发 环境 中 设置 了 模拟 锅 ， 那 么 你 可 以 让 Cordova 在 你 的 模拟 需 中 局 动 并 安装 
应 用 。 





$ cordova emulate ios 
对 于 iOS, 如 果 没有 在 机 器 上 设置 模拟 器 环境 , 你 可 能 必须 使 用 XCode 构 建 项 目 ( 正 
如 上 面 那样 )。 
此 外 , 还 可 以 使 用 run 命 令 在 特定 的 设备 上 运行 你 的 应 用 程序 。 run 命令 会 在 设备 上 启动 应 用 
程序 ， 或 者 在 没有 找到 设备 、 没 有 可 用 设备 的 情况 下 在 模拟 器 中 启动 应 用 。 


$ cordova emulate ios 








26.4.6 ”开发 阶段 


当 改 变 了 应 用 的 某 个 部 分 时 ， 重 新 编译 应 用 以 便 将 这 部 分 变化 反映 到 其 中 可 能 会 比较 麻烦 。 
为 了 帮助 开发 人 员 加 速 应 用 Web 部 分 的 开发 工作 ,你 可 以 使 用 serve 命 令 启用 Web 浏 览 器 ,为 www/ 
目录 提供 一 个 本 地 服务 。 

$ cordova serve ios 


Static file server running at => http://0.0.0.0:8000/ 
CTRL + C to shutdown 


这 样 就 可 以 在 Web 浏 览 需 中 导航 到 如 下 URL: 
http://localhost:8000/ios/www/index.html 


通过 使 用 HTTP 为 应 用 的 www/ 目 录 提 供 服 务 ， 就 可 以 在 我 们 对 应 用 作出 改变 时 编译 以 及 监 
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当 你 对 应 用 作出 改变 时 ， 需 要 确保 重新 构建 应 用 ， 如 图 26-8 所 示 。 


$cordova build ios 








从 APACHE CORDOVA 











图 26-8 ”使 用 Safari 构 建 应 用 

















26.4.7 ”Anguar 中 的 Cordova 服 务 
当 你 准备 好 Cordova 应 用 ， 设 备 也 已 经 连接 好 ， 一 切 都 准备 好 时 ，Cordova 会 触发 一 个 叫做 
deviceready 的 浏览 右 事 件 。 


在 Angular 中 ,可 以 在 这 个 事件 被 触发 之 后 启动 应 用 , 或 者 也 可 以 在 deviceready 事 件 被 触发 
之 后 使 用 promise 处 理应 用 的 逻辑 部 分 。 


要 在 接收 到 deviceready 事 件 之 后 启动 应 用 ， 需 要 给 这 个 事件 设置 一 个 监听 需 ， 然 后 手动 局 
动 应 用 : 


angular.module('myApp'，[]); 











var onDeviceReady = function() { 
angular .bootstrap(document, ['myApp']); 
}; 


document .addEventListener('deviceready', onDeviceReady); 


这 里 推荐 一 个 替代 的 方法 监听 qdqeviceready 事 件 ， 就 是 在 qdeviceready 事 件 被 触发 之 后 使 用 
promise 的 方式 设置 执行 绑 定 。 


在 这 里 我 们 设置 了 一 个 Angular 模 块 监听 deviceready 事 件 。 也 可 以 使 用 服务 来 监听 
deviceready 事 件 ， 然 后 依赖 于 这 个 事件 是 否 被 触发 来 解析 promise。 


angular.module( 'fsCordova'，[]) 
.SerVvice( 'CordovaService'，[ '$dqocument ' ，'$q' ， 
function($document, $q) { 
var d = $q.defer(), 
resolved = false; 
var self = this; 
this.ready = d.promise; 





























document .addEventListener('deviceready', function() { 
resolved = true; 
d.resolve(window.cordova); 


> 


// 检查 一 下 以 确保 没有 漏 掉 这 个 事件 〈 以 防 万 一 ) 


setTimeout(function() { 
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if(!resolved) { 
if (window.cordova) { 
d.resolve(window.cordova); 
} 


} 
}，3000); 


ls 
现在 ， 再 将 fscordova 作 为 依赖 ， 设 置 给 应 用 程序 模块 : 


angular.module('myApp'，[ fsCcordova ']) 
A es 


可 以 使 用 这 个 CordovaService 来 确定 Cordova 是 否 准 备 好 了 ， 事 实 上 这 里 已 经 准备 好 了 ， 并 
是 我 们 还 可 以 依赖 于 这 个 服务 是 否 准备 就 绪 来 设置 逻辑 : 


angular .module( 'myApp', ['fsCordova']).controller('MyController', function($scope, 
CordovaService) { 
CordovaService.ready.then(function() { 
// 此 时 Cordova 已 经 准备 好 了 
上 
所 


























26.5 引入 Angular 
空 的 Cordova 应 用 ， 目 前 只 是 一 个 没有 价值 的 JavaScript 应 用 ， 它 只 在 jsindexjs 中 隐藏 和 
显示 0 . 


你 可 以 以 很 简单 的 方式 将 Angular 引 入 到 工作 流程 中 。 因为 这 里 要 构建 一 个 原生 应 用 , 从 CDN 
中 引入 Angular 并 不 理想 ; 相反 ， 应 该 将 必要 的 组 件 直接 包含 到 应 用 中 。 


虽然 可 以 使 用 Bower 处 理 更 复杂 的 设置 ， 但 是 就 目前 而 言 ， 先 保持 简单 。 

为 了 构建 Angular 应 用 ， 需 要 从 angularjs.org"” 上 下 载 Angular， 并 且 应 该 将 它 存 放 到 index.html 
可 访问 的 日 录 中 。 推 荐 www/js/vendor/angular.js。 

设置 好 之 后 ， 就 可 以 开始 构建 Angular 应 用 了 。 首 先 需 要 在 www/index.html 中 引入 这 
JavaScript 文 件 。 



































<ScTript type="text/javascript" src="js/vendor/angular.js"> </script> 


现在 , 你 可 以 替换 当前 Angular 应 用 中 js/index.js 文 件 中 的 所 有 内 容 , 然后 正常 开发 这 个 应 用 了 。 








开发 流程 
构建 应 用 时 ， 我 们 将 会 使 用 如 下 流程 : 


口 启动 本 地 服务 器 ( Cordova serve [platform] ); 
口 编写 应 用 ; 
口 重新 构建 应 用 ( Cordova build [platform] )。 




















GD http://angularjs.org/ 
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这 个 流程 虽然 有 些 麻 烦 ， 但 这 就 是 我 们 编写 应 用 的 方式 。 


如 果 你 的 应 用 不 依赖 于 Cordova 平 台 , 那 可 以 编写 脱离 模拟 需 的 应 用 , 在 浏览 需 中 运行 应 用 。 
这 种 情况 下 ， 你 就 可 以 专心 构建 应 用 ， 而 无 需 重新 构建 或 者 重新 部 署 应 用 。 




















26.6 ”使 用 Yeoman 构建 


你 可 以 使 用 Yeoman" 来 构建 生产 就 绪 的 应 用 。Yeoman 是 一 个 构建 脚本 的 集合 , 这 是 一 个 官方 
支持 的 Angular 应 用 构建 程序 。 关 于 Yeoman 的 更 多 信息 ， 请 参考 34.7 节 。 


先 安 装 Yeoman 、Angular 生 成 句 以 及 Cordova 生 成 天: 











$ npm install -g yo 

$ npm install -g generator-angular 

$ npm install -g cordova 

为 了 同时 使 用 Yeoman 和 Cordova， 我 们 还 需要 对 上 述 流程 做 一 些 调整 。 
首先 要 创建 一 个 标准 的 Cordova 应 用 : 


$ cordova create gapapp io.fullstack.gapapp "GapApp" 








行 命令 会 在 本 地 目录 中 创建 一 个 标准 的 gapapp 目 录 ， 如 图 26-9 所 示 。 


8@0e a mobile 一 zsh 一 Solarized Dark xterm-256: 





TT | 





图 26-9 生成 应 用 
接 下 来 ， 让 我 们 进入 到 这 个 目录 并 添加 平台 : 


$ cd gapapp/ 
$ cordova platform add ios 


这 一 步 会 创建 一 个 平台 目录 ， 稍 后 我 们 将 会 在 模拟 器 和 设备 中 在 本 地 处 理 真实 的 gapapp。 
要 做 的 第 一 件 事 就 是 在 目录 中 设置 Yeoman 应 用 ， 然 后 对 默认 配置 做 一 些 细微 的 改变 。 
$ yo angular 


这 回 通 过 标准 的 Yeoman 问 题 完 成 这 一 过 程 ， 同 时 会 构建 一 个 标准 的 目录 。 






































QD http://yeoman.io/ 
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当 这 个 过 程 完成 时 , 在 app/ 目 录 中 就 有 Yeoman 应 用 了 。 我 们 将 会 在 这 个 位 置 进行 构建 移动 应 
用 的 所 有 工作 。 

在 这 个 工具 链 中 ， 我 们 将 使 用 如 下 流程 来 构建 这 个 应 用 : 
口 编写 代码 ; 
口 测试 代码 (Angular 测 试 ); 
口 在 模拟 器 中 运行 代码 ( 可 选 ); 
口 运行 设备 测试 代码 ( 可 选 )。 

Yeoman 构 建 工 具 负 责 前 面 两 个 任务 。 后 面 两 个 任务 稍 后 会 建立 。 

Cordova 的 工作 原理 就 是 将 www/ 目 录 包 含 到 编译 后 的 应 用 中 ， 因 此 对 www/ 目 录 中 的 文件 做 
出 的 任何 改变 都 将 会 在 构建 后 被 包装 到 编译 好 的 应 用 程序 中 。 











26.6.1 修改 Yeoman 以 便 使 用 Cordova 
默认 情况 下 Yeoman 会 采用 一 个 不 同 的 结构 将 应 用 程序 构建 到 disVy 目 录 中 。 我 们 将 修改 这 个 构 
建 目 录 ， 让 它 应 用 始终 构建 到 www/ 目 录 中 。 

首先 ， 必 须 保存 由 Cordova 的 创建 命令 构建 的 www/config.xml 文 件 。 我 们 希望 把 它 从 www/ 中 
复制 或 者 移动 到 app/ 目 录 中 。 





$ cp www/config.xml app/ 
我 们 在 使 用 Yeoman 构 建 应 用 时 将 这 个 config.xml 文 件 复制 回 www/ 目 录 中 。 


为 了 改变 使 用 Yeoman 构 建 应 用 时 的 默认 目录 , 在 Gruntfile.js 中 找到 Yeoman 配 置 部 分 , 然后 将 
dist: 属 性 的 值 从 dist 改 变 为 www 即 可 : 














yO 
grunt, initConfig({ 
yeoman: { 
app: require('./bower.json').appPath || 'app'， 
dist: 'www' // <~ 改变 这 个 选项 为 www 
}; 
watch: { 
Hf es 


接 下 来 ， 你 需要 告诉 Yeoman， 在 它 复制 的 文件 列表 中 要 包含 config.xml 文 件 。 幸 运 的 是 ， 这 
个 过 程 很 容易 : 只 需 添 加 一 个 字符 串 到 复制 任务 的 文件 路 径 中 即 可 。 
在 copy:dist 配 置 内 ， 将 xml 扩 展 名 添加 到 复制 文件 列表 的 匹配 模式 中 就 行 了 : 


























7 
} 
copy: { 
dist: { 
file: [{ 
expand: true, 
dot: true, 


cwd: '<%= yeoman.app %>', 
dest: '<%= yeoman.dist %>', 
sres | 
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'x*.{ico,png,txt,xml}'，// <^ 添 加 Xm1l 扩 展 名 
'.htaccess', 


7 
这 两 个 命令 就 绪 后 ， 我 们 就 可 以 使 用 Yeoman 构 建 应 用 了 ， 它 将 会 构建 app/ 目 录 以 及 www/ 目 
录 内 的 应 用 程序 。 


$ grunt build 


这 条 命令 会 设置 这 个 基础 应 用 使 用 Yeoman， 但 是 对 那些 我 们 想 要 用 来 真正 构建 移动 应 用 的 
开发 工具 并 不 适用 。 











26.6.2 ”装配 Yeoman 构 建 


注意 ， 在 开发 应 用 程序 时 ， 我 们 不 能 从 CDN 提 取 远 程 资 源 。 默 认 情 况 下 ，Yeoman 会 设置 应 
用 从 Google CDN 加 载 脚本 。 因 此 ， 必 须 稍 微 修 改 一 下 index.html 模 板 ， 通 过 将 script 标 签 包 括 在 
usemin 构 建 脚本 内 的 方式 放弃 从 CDN 加 载 jquery 和 angular 脚 本 ， 就 像 这 样 : 


是 站 二 一 

添加 下 面 这 行 配 置 ， 然 后 在 script 标 签 之 后 添加 一 个 endbuild 
一 -> 
¢!-—builgd:jsscripts/library.js--> 
<Script src="bower_components/jquery/jquery.js">¢/script> 
《<script src="bower_components/angular/angular.js"></script> 
¢!-—endbui1d-——> 





26.6.3 ”构建 移动 部 分 


为 了 使 用 Yeoman 这 个 工具 构建 移动 应 用 ， 你 可 以 给 Grunt 添 加 一 些 任务 定义 ， 从 而 创建 一 个 
构建 、 测 试 和 部 署 到 设备 的 程序 。 
Cordova 有 两 个 不 同 的 用 于 构建 应 用 的 文件 ( 二 进 制 文件 ): 一 个 是 platforms/ 目 录 中 的 本 地 构 


建 工 具 ( 用 于 真实 的 编译 原生 应 用 程序 ) 和 一 个 全 局 二 进 制 文件 ( 用 于 构建 通过 Cordova 的 create 
命令 创建 在 根 目 录 中 的 应 用 程序 )。 


为 了 正常 构建 应 用 程序 ， 你 可 以 从 根 目 录 运 行 Cordova 构 建 命令 。Cordova 会 复制 yww/ 目 录 
a 


$ cordova build 


你 也 可 以 创建 一 个 任务 来 做 这 件 事 ， 这 样 就 可 以 使 用 Grunt 进 行 标 准 构 建 工作 。 为 了 支持 这 
点 ， 需 要 安装 一 个 叫做 grunt-shel1 的 Grunt 库 。 你 可 以 使 用 npm 安 装 这 个 库 。 





















































$ npm install --save-qdev grunt-shell 


接 下 来 ， 还 需要 定义 shel1 命 令 配 置 。 我 们 将 创建 两 个 命令 : 一 个 用 于 在 计算 机 的 移动 设备 
模拟 器 中 模拟 运行 应 用 ， 另 一 个 用 于 将 应 用 部 署 到 真实 的 设备 中 。 





uglify: { 
AR 


shell: { 
build: { 
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command: "cordova build' 

}i 

emulate: { 
command: 'cordova build' 
} 

} 


a 
目前 为 止 这 两 

















以 在 每 个 平台 类 型 对 应 的 平台 路 径 中 找到 。 





例如 ， 由 于 我 们 已 经 在 platforms/ios/cordova/emulate 中 添加 了 iOS 平 台 
Sa 的 emulate 命 令 。 如 果 添 加 了 Android 平 台 





这 个 Android 平 台 目 录 内 找到 这 个 Cordova 命 令 。 














两 条 命令 非常 相似 , 但 是 对 于 这 两 条 
因此 我 们 需要 使 用 局 部 的 Cordova 命 令 模 拟 或 者 





命令 ,我 们 希望 让 Cordova 首 先 构建 应 用 程序 
运行 我 们 的 应 用 程序 。 局 


局 部 的 Cordova 命 令 可 


此 在 iOS 目 录 中 有 
还 可 以 ie ie 


我 们 还 希望 构建 一 个 辅助 函数 来 帮助 我 们 找到 这 些 局 部 Cordova 命 令 。 在 Gruntfile 的 顶部 , 添 


加 如 下 命令 即 可 : 


module.exports = function(grunt) { 
var path = require('path'), 
cordova = require('cordova ' ) ; 





var cordova_cmd = function(cmd) { 


var target = grunt.option('target') || 
"platforms", 


return path. join(_ dirname, 


} 


"ios"; 
target, 


"cordova", cmd); 


现在 ， 就 可 以 使 用 cordova_cmd( ) 函数 找到 这 些 局 部 Cordova 命 令 了 。 对 于 这 些 局 部 命令 ， 
这 





还 可 以 修改 前 面 建立 的 shell 任 务 来 引入 i 
shell: { 
build: { 
command: 'cordova build && ' + 
cordova_cmd( 'emulate') 
外 
run: { 
command: 'cordova build &&' + 
cordova_cmd( "run") 
} 
} 








现在 ， 就 可 以 通过 在 shell 中 直接 运行 它们 来 使 用 这 











$ grunt shell:buildq 


基于 我 们 正在 开发 的 平台 ， 
要 确保 安装 了 ios-sim。 更 多 ee 


由 于 还 没有 将 这 些 命令 包装 到 其 他 命 
此 它们 基本 上 没什么 用 。 




















GD http://docs.phonegap.com/en/3.1.0/index.html 


些 自 定 义 的 任务 。 


文 些 命令 进行 测试 了 : 


要 安装 相关 人 依赖。 例如， 对 于 iOS 平 台 ， 需 
Se 方 文档 ?提供 的 平台 依赖 。 


令 中 来 真正 地 从 app/ 目 录 将 应 用 构建 到 www/ 目 录 中 , 因 
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Grunt 让 这 一 过 程 很 变 得 容易 : 可 以 简单 的 注册 一 个 新 任务 来 运行 多 个 Grunt 任 务 。 在 这 种 情 
况 下 ， 你 可 以 简单 地 将 build 和 run 命 令 包 装 到 一 个 优先 调用 build 的 新 任务 中 : 


// 这 里 是 上 面 的 任务 配置 
} 
}); 
A 
grunt .registerTask('devemulate', | 
'build', 
"Shell:build' 
| 


grunt .registerTask( 'devrun'，[ 
'build', 
"shell:run' 


] ) ; 


grunt .registerTask( 'server' ,function(target){ 


全 
这 段 代 码 让 我 们 可 以 使 用 qevemulate 命 令 : 这 样 就 可 以 在 模拟 需 环 境 或 者 设备 中 运行 我 们 
的 应 用 。 


$ grunt devemulate 








OO 注意 ， 如 果 这 个 命令 没有 按照 预期 工作 ,通常 可 以 使 用 grunt 的 --verbose 标 记 
揭示 问题 所 在 ， 比 如 缺少 依赖 。 


此 外 还 可 以 使 用 devrun 任 务 在 一 个 已 经 设置 接受 正在 开发 的 应 用 程序 的 移动 设备 中 运行 这 
个 应 用 程序 : 


$ grunt devrun 








26.6.4 “处理 引导 程序 


最 后 ，Cordova 平 台 使 用 触发 在 DOM 上 的 deviceready 事 件 来 表明 设备 已 经 准备 就 绪 了 。 但 
是 在 Cordova 应 用 已 经 准备 好 和 Angular 应 用 启动 之 前 ， 两 者 之 间 又 陷 和 人 了 一 个 时 机 问题 。 可 以 通 
过 创建 一 个 捕获 deviceready 事 件 的 服务 ， 然 后 将 它 转变 为 一 个 在 外 部 可 用 的 变量 来 避 开 这 个 问 
题 。 这 个 服务 非常 简单 : 


angular.module( 'gapappApp .services') 
.factory('Cordova', function($q) { 
var d = $q.defer(); 
if(window.navigator) { 
d.resolve(window.navigator ) ; 
} else { 
document 
.addEventListener('deviceready', function(evt) { 
d.resolve(navigtor); 


1 








} 
return { 
navigator: function() { 
return d.promise; 
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} 


}); 
现在 ， 当 想 要 使 用 Cordova 的 navigator 时 ,只 需 遵循 如 下 语法 形式 , 设备 就 绪 后 就 能 解析 


它 了 : 


angular .module( 'gapappApp' ) 
.controller('MainController', 


function($scope, Cordova) { 
Cordova.navigator().then(function(navigator) { 


nNavigator.notification.vibrate( ); 


}); 





}); 
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本 地 化 








随 着 世界 各 地 Web 访 问 量 的 增加 ， 作 为 开发 者 的 我 们 也 在 不 断 让 应 用 国际 化 、 本 地 化 。 当 用 
户 访问 我 们 的 应 用 时 ， 他 应 该 能 够 在 运行 时 立即 切换 语言 环境 。 

鉴于 我 们 正在 开发 的 是 AngularJS 客 户 端 应 用 ， 尤 其 不 希望 用 户 必 须 刷新 页 面 或 者 访问 一 个 
完全 不 同 的 URL。 当 然 ，AngularJS 可 以 很 容易 地 调整 那些 国际 化 读者 的 本 机 语言 环境 ， 或 许 通 
过 为 不 同 语言 生成 不 同 模板 的 方式 为 应 用 提供 服务 。 

然而 , 这 个 过 程 可 能 会 很 麻烦 ， 当 我 们 想 要 改变 应 用 的 布局 时 会 发 生 什么 情况 ? 每 个 独立 的 
模板 都 需要 重新 构建 和 部 署 。 而 这 个 过 程 应 该 是 很 简单 才 对 。 











27.1 angular-translate 








你 可 以 使 用 angular-translate 来 蔡 代 创 建新 模板 的 方式 , 这 个 AngularJS 模 块 为 你 的 应 用 提 
供 了 il8n ( 国际 化 ) 服务 。angular-translate 要 求 创 建 一 个 JSON 文 件 ， 它 描述 每 种 语言 的 翻译 
数据 。 然 后 它 只 会 在 必要 时 从 服务 器 延迟 加 载 特定 语言 的 翻译 数据 。 


angular-translate 库 自 带 了 很 多 内 置 指 令 和 过 滤器 ， 这 让 我 们 的 应 用 国际 化 变 得 简单 。 我 
们 一 起 来 学 习 一 下 。 


27.2 安装 
为 了 使 用 angular-translate， 需要 加 载 这 个 库 。 可 以 使 用 几 种 不 同 的 方式 安装 它 ， 但 是 推 
荐 使 用 Bower。 


Bower 是 一 个 前 端 包 管 理 回 。 它 不 仅 能 够 处 理 JavaScript 库 ， 还 可 以 处 理 HTML 、CSS 以 及 图 
片 程 序 包 。 一 个 程序 包 就 是 一 个 简单 的 封装 ， 典 型 的 例子 就 是 一 个 可 公开 访问 的 第 三 方 代 码 库 。 


口 使 用 Bower 














使 用 标准 的 Bower 方 法 安装 angular-translate: 
$ bower install angular-translate 
此 外 ， 你 也 可 以 从 Github 下 载 压缩 版 的 angular-translate。 


安装 好 最 新 稳定 版 本 的 angular-translate 之 后 ,你 就 可 以 简单 地 将 它 租 入 到 你 的 HTML 文 
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档 中 。 只 要 确保 它 蔡 入 在 Angular 脚 本 之 后 ， 因 为 它 依赖 于 angular 库 。 


<script src="path/to/angular.js"></script> 
<script src="path/to/angular-translate.js"></script> 


最 后 一 项 要 点 是 ， 在 你 的 应 用 中 必须 将 angular-translate 声 明 为 一 个 加 载 依赖 : 





var app = angular.module('myApp', ['pascalprecht.translate']); 


很 好 ! 现在 已 经 准备 好 使 用 angular-translate 组 件 来 翻译 你 的 应 用 了 。 








27.3 教 你 的 应 用 一 种 新 语言 
安装 好 angular-translate 后 ， 将 它 声 明 为 应 用 的 依赖 ， 这 样 才 可 以 用 它 来 翻译 应 用 程序 的 


P< 


内 容 。 

首先 , 需要 提供 翻译 数据 ,这 样 应 用 才能 真正 地 说 一 种 新 的 语言 。 这 一 步 可 以 通过 使 用 最 新 
的 $translateProvider 服 务 配 置 $translate 服 务实 现 。 

培养 应 用 使 用 一 种 新 的 语言 很 简单 。 只 需 在 应 用 上 使 用 config 函 数 , 为 应 用 提供 不 同 的 语言 
翻译 ( 比如 英语 、 德 语 、 希 伯 来 语 等 )。 首 先 ， 需 要 将 $translateProvider 注 人 到 配置 函数 中 ， 
就 像 这 样 : 

angular .module( 'angularTranslateApp', ['pascalprecht.translate']) 


.config(function($translateProvider) { 
// 翻译 会 放 到 这 里 





























上 站 

要 添加 一 种 语言 ， 必 须 让 $translateProvider 找 到 一 个 翻译 表格 ， 这 是 一 个 JSON 对 象 ， 它 
包含 将 要 翻译 为 具体 值 的 消息 ( 键 )。 使 用 翻译 表格 时 允许 我 们 将 翻译 数据 编写 为 一 个 简单 的 
JSON 文 件 ， 以 便 从 远程 加 载 或 者 在 编译 时 设置 ， 比 如 : 








'MESSAGE': "Hello world', 
} 


在 翻译 表格 中 ， 键 ( key ) 表示 一 个 翻译 ID ， 而 其 值 表 示 某 种 语言 特定 的 翻译 数据 。 现 在 ， 
先 给 应 用 添加 一 个 翻译 表格 。$translateProvider 提 供 了 一 个 叫做 translations( ) 的 方法 来 处 
理 它 。 





app.config( function($translateProvider) { 
$translateProvider .translations({ 
HEADLINE: 'Hello there, This is my awesome app!', 
INTRO_TEXT: 'And it has i1i8n support!' 
上 
1 
有 了 这 个 翻译 表格 之 后 ， 应 用 就 可 以 使 用 angular-translate 了。 由 于 这 是 在 配置 期 间 添 加 


的 翻译 表格 ， 因 此 在 angular-translate 的 组 件 被 实例 化 时 就 能 访问 到 这 个 翻译 表格 了 。 

先 切换 到 应 用 的 模板 部 分 。 要 将 键 绑 定 给 视图 很 简单 ， 只 需 添 加 翻译 数据 到 视图 层 即 可 。 使 
用 translate 过 小 器 时 ， 甚 至 不 必 接 触 控制 器 或 者 服务 ， 或 者 无 需 担 心 视 图 层 : 因为 你 可 以 从 任 
何 控制 器 或 者 服务 中 解 耦 翻译 逻辑 ， 并 且 无 需 接 触 业 务 逻 辑 代 人 码 就 能 让 视图 可 替换 。 
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从 根本 上 说 ，translate 过 滤器 的 工作 原理 就 像 这 样 
<h2>{{ "TRANSLATION_ID' | translate }}</h2> 
也 可 以 使 用 这 个 translate 过 滤器 来 更 新 示例 应 用 程序 : 


<h2>{{'HEADLINE' | translate }}¢/h2> 
<p>{{'INTRO_TEXT' | translate}}</p> 


很 好 ! 现在 可 以 翻译 视图 层 中 的 内 容 了 , 并 且 还 避免 了 翻译 逻辑 污染 控制 需 逻 辑 ; 然而 ， 即 
使 我 们 不 使 用 angular-translate 也 能 得 到 完全 相同 的 结果 ,因为 在 这 个 示例 应 用 中 只 涉及 一 种 
语言 。 


接 下 来 我 们 一 起 看 看 angular-translate 真 正 的 能 力 ， 然 后 学 习 如 何 教 应 用 多 种 语言 。 








27.4 ”多 语言 支持 


前 面 我 们 已 经 通过 translations() 方 法 为 应 用 添加 了 一 个 翻译 表格 。 

正如 translations() 方 法 所 设置 的 ，$translateProvider 识 别 了 一 种 语言 。 现 在 ， 可 以 通 
过 提供 第 二 个 翻译 表格 以 同样 的 方式 添加 一 种 新 的 语言 。 

设置 第 一 个 翻译 表格 时 ,我 们 可 以 给 它 提供 一 个 键 (语言 键 ) 来 指定 我 们 要 翻译 的 语言 。 这 
样 可 以 使 用 不 同 的 语言 键 添加 不 同 的 翻译 。 

更 新 一 下 应 用 ， 让 它 包含 第 二 种 语言 : 


app.config(function($translateProvider) { 
$translateProvider.translations('en_US', { 
HEADLINE: "Hello there, This is my awesome app!', 
INTRO_TEXT: 'And it has i18n support!' 


}); 
}); 


为 了 给 不 同 语言 添加 附加 的 翻译 表格 ,比方 说 德语 , 我 们 只 需 使 用 不 同 的 语言 键 做 同样 的 引 
情 就 行 了 。 
app.config(function($translateProvider) { 
$translateProvider.translations('en', { 


HEADLINE: 'Hello there, This is my awesome app!', 
INTRO_TEXT: 'And it has i18n support!' 



































i 








}) 

.translations('de', { 
HEADLINE: 'Hey, das ist meine groRartige App!', 
INTRO_TEXT: 'Und sie untersutzt mehrere Sprachenl 


}); 
}); 


现在 ,应 用 能 识别 两 种 不 同 的 语言 了 。 你 可 以 根据 需要 随意 添加 尽 可 能 多 的 语言 ; 但 是 , 现 
在 这 里 有 了 两 种 有 效 的 语言 ， 那 么 应 用 如 何 知道 该 使 用 哪 种 语言 呢 ? 在 你 告诉 它 应 该 怎么 做 之 
前 ，angular-translate 不 会 推荐 任何 语言 。 

















要 设置 首选 语言 ， 你 可 以 使 用 $translateProvider .preferredLanguage( ) 方 法 。 这 个 方法 
会 告诉 angu lar-translate 哪 种 已 注册 语言 是 应 用 默认 应 该 使 用 的 语言 。 它 要 求 使 用 一 个 语言 键 
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值 作为 参数 ， 这 个 参数 指向 某 个 翻译 表格 。 
现在 ,我 们 来 告诉 应 用 应 该 使 用 英语 作为 默认 语言 : 


app.config( function($translateProvider) { 
$translateProvider.translations('en', { 
HEADLINE: 'Hello there, This is my awesome app!', 
INTRO_TEXT: 'And it has id18n support!' 








}) 


.translations('de', { 
HEADLINE: 'Hey, das ist meine groRartige App!', 
INTRO_TEXT: 'Und sie untersutzt mehrere Sprachen!’ 
上 
$translateProvider .preferredLanguage( 'en' ); 


二 





27.5 运 运行 时 切换 语言 


要 在 运行 时 切换 到 一 种 新 语言 ， 必 须 使 用 angular-translate 的 $translate 服 务 。 它 有 一 个 
use( ) 方 法 ， 这 个 方法 要 么 返回 一 个 当前 正在 使 用 的 语言 对 应 的 语言 键 ， 或 者 传递 一 个 语言 键 作 
为 参数 ， 这 个 参数 会 让 angular-translate 使 用 该 参数 对 应 的 语言 。 


为 了 感受 一 下 如 何在 真实 的 应 用 中 运用 这 一 功能 , 我 们 可 以 添加 两 个 表示 译文 的 翻译 ID , 稍 
后 添加 到 HTML 模 板 中 的 按钮 会 用 到 这 两 个 ID : 














app.config(function($translateProvider) { 
$translateProvider.translations('en', { 
HEADLINE: 'Hello there, This is my awesome app!', 
INTRO_TEXT: 'And it has id18n support!', 
BUTTON_TEXT_EN: 'english', 
BUTTON_TEXT_DE: "german' 
}) 
.translations('de', { 
HEADLINE: 'Hey, das ist meine groRartige App!', 
INTRO_TEXT: 'Und sie untersutzt mehrere Sprachenl 
BUTTON_TEXT_EN: "englisch '， 
BUTTON_TEXT_DE: "qdqeutsch' 
上 
$translateProvider .preferredLanguage( 'en ' ) ; 


]) 

接 下 来 ,我 们 要 使 用 $translate 服 务 和 它 的 use( ) 方 法 在 控制 咒 上 实现 一 个 方法 以 便 在 运行 
时 改变 语言 。 为 此 ， 要 将 $translate 服 务 注 入 到 应 用 的 控制 需 中 ， 然 后 添加 一 个 函数 给 它 的 
$scope 对 象 : 














app.controller('TranslateController', function($translate, $scope) { 
$scope.changeLanguage = function(langKey) { 
$translate.use(langKey); 
} 
}); 


接着 , 我们 通过 为 每 种 语言 添加 一 个 按钮 的 方式 在 HTML 模 板 中 反映 这 一 变化 。 还 必须 在 每 
个 按钮 上 设置 一 个 ng-click 指 令 在 运行 时 调用 改变 语言 的 函数 。 
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<dqiv ng-controller="TranslateController"> 
<button ng-click="changeLanguage('de')" translate="BUTTON_TEXT_DE"></button> 
<button ng-click="changeLanguage('en')" translate="BUTTON_TEXT_EN"></button> 
/div% 


瞧 瞧 ! 现在 我 们 就 拥有 一 个 支持 多 语言 的 应 用 了 。 
27.6 ”加 载 语言 

如 果 我 们 只 是 设置 静态 语言 那 多 没劲 啊 ! 多 亏 了 Angular 的 $http 服 务 ， 我 们 可 以 通过 
$translateProvider 的 registerLoader 方 法 来 动态 加 载 语言 。 


首先 ， 需 要 安装 angular-translate-loader-ur1 扩 展 来 设置 1oader-ur1 服 务 ， 它 要 求 有 一 
个 后 端 服务 器 通过 处 理 1ang 参 数 的 方式 返回 JSON 数 据 。 如 果 你 已 经 有 一 个 处 理 带 lang 参 数 路 由 
的 后 端 程序 ， 那 么 可 以 像 这 样 使 用 Bower 安 装 10ader-ur1 服 务 : 




















$ bower install angular-translate-loader-url 


如 果 你 更 喜欢 使 用 服务 来 加 载 静态 文件 ， 那 么 可 以 使 用 static-files 加 载 名 从 语言 路 径 中 
加 载 JSON 文 件 。 由 于 这 个 路 由 程序 很 简单 ， 这 里 将 继续 使 用 Bower 来 安装 这 个 服务 : 








bower install angular-translate-loader-static-files 
现在 ， 先 让 我 们 确保 已 经 使 用 script 标 签 将 这 个 文件 载 人 视图 中 了 : 
<Script src="/js/angular-translate-loader-url.min.js"></script> 


为 了 配置 服务 以 使 用 这 个 static-files 加 载 吉 ， 你 需要 让 $translateProvider 使 用 一 个 配 
置 对 象 来 启用 这 个 加 载 器 。 这 个 配置 对 象 接 受 两 个 参数 : 
口 prefix 指 定 文件 前 级 ( 含 文件 路 径 ); 
口 suffix 指 定 文件 后 级 ( 常见 的 扩展 名 )。 
这 个 加 载 器 试图 从 如 下 URL 路 径 中 获取 文件 : [prefix]/[langkey]/[suffix] 。 比 如 ， 如 果 
设置 配置 对 象 为 : 











$translateProvider .useStaticFilesLoader({ 
prefix: '/languages/', 
suffix: '.json"' 
1 
angular-translate 会 试图 从 /languages/en US.json 中 加 载 en_us 语 言 。 像 这 样 使 用 
StaticFilesLoader 时 就 带 来 了 延迟 加 载 的 额外 好 处 。 在 运行 时 $translate 只 会 在 需要 语言 文件 
时 才 加 载 它 。 
当然 ,应 用 加 载 时 ， 异 步 加 载 会 导致 未 翻译 的 内 容 闪 现 。 可 以 通过 将 应 用 自 带 语言 设置 为 默 
认 语 言 的 方式 规避 这 一 副作用 。 
最 后 还 有 一 个 很 酷 的 特性 : 可 以 使 用 本 地 存储 ( local storage ) 功能 存储 语言 文件 。 
angular-translate 提 供 了 使 用 本 地 存储 的 能 力 ; 你 可 以 用 一 个 函数 来 启用 这 一 功能 : 


.config(function($translateProvider) { 
$translateProvider.useLocalStorage( ) ; 


] ) ; 
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至 此 我 们 已 经 介绍 了 如 何 使 用 anguar-translate 的 $translateProvider .translations() 
方法 和 translate 过 滤器 为 Angular 应 用 提供 i18n 支 持 。 此 外 还 展示 了 如 何 使 用 $translate 服 务 以 
及 它 的 use( ) 方 法 在 运行 时 改变 语言 。 

你 可 以 尝试 一 下 angular-translate。 它 提供 了 很 多 非常 棒 的 特性 ， 比 如 处 理 多 元 化 ,使 用 
自 定 义 加 载 器 和 通过 服务 设置 翻译 。 它 的 文档 非常 出 色 ， 建 议 你 在 这 里 "查看 它们 。 

那里 还 有 很 多 可 以 直接 用 于 你 的 站 点 的 示例 。 同 时 它 还 是 一 个 展示 了 所 有 可 用 组 件 和 接口 的 
API 参 考 手 册 ”， 这 些 都 可 以 用 于 构建 了 不 起 的 带 有 国际 化 支持 的 应 用 。 





























27.7 angular-gettext 





类 似 于 angular-translate，angular-gettext 使 用 一 个 完 不 同方 法 提供 了 翻译 功能 。 但 它 
不 需要 我 们 将 想 要 翻译 的 字符 串 垦 入 到 应 用 中 ， 而 是 抽象 出 特定 的 字符 串 让 程序 库 处 理 它们 。 


Gettext 是 一 个 由 GNU 项 目 发 起 的 国际 化 和 本 地 化 系统 ， 该 项 目 最 早 发 布 于 1995 年 。 它 是 一 
个 非常 流行 的 支持 新 语言 的 系统 ， 因 为 它 可 将 字符 串 打 包 ， 以 便 稍 后 翻译 。 


angular-gettext 库 以 同样 的 方式 工作 ， 它 将 稍 后 想 要 翻译 的 字符 串 包装 起 来 。 




















27.8 安装 

为 了 使 用 angular-gettext ， 首先 需要 加 载 anglar-gettext 库 。 虽然 可 以 使 用 几 种 不 同 的 方 
式 安装 它 ， 但 是 我 们 推荐 使 用 Bower。 

口 使 用 Bower 


可 以 像 这 样 使 用 Bower 安 装 angular-gettext: 








$ bower install --save angular-gettext 
此 外 ， 你 也 可 以 从 Github 下 载 压缩 版 的 angular-gettext。 


安 半 了 最 新 的 稳定 版 的 angular-gettext 之 后 ， 就 可 以 简单 的 将 它 舱 入 到 HTML 文 档 中 。 只 
需要 确保 在 Angular 之 后 姐 入 ， 为 它 依 赖 于 核心 的 angular 库 以 及 jquery ( 因为 它 也 是 
angular-gettext 的 依赖 项 )。 








<script src="path/to/jquery.js"></script> 
<script src="path/to/angular.js"></script> 
<script src="path/to/angular-gettext.js"><¢/script> 


最 后 一 项 要 点 是 ， 在 你 的 应 用 中 必须 将 angular-gettext 声 明 为 一 个 加 载 依赖 : 








var app = module('myApp', ['angular-gettext']); 


现在 就 已 准备 好 使 用 angular-gettext 的 组 件 来 翻译 你 的 应 用 了 。 





GD http://pascalprecht.github.io/angular-translate 
© http://pascalprecht.github.io/angular-translate/#/api 
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27.9 用 法 

















angular-gettext 库 包含 translate 指 令 ， 这 是 一 个 简单 的 指令 ， 它 可 以 被 放置 在 那些 包含 
你 想 要 翻译 的 字符 串 的 DOM 元 素 上 。 





<h1i translate>Hellol</h1> 
<h1> 的 内 容 将 使 用 我 们 稍 后 会 定义 的 字符 串 译本 自动 翻译 。 


与 普通 的 字符 串 相 比 ， 待 翻译 的 字符 串 也 会 以 同样 的 方式 处 理 ，angular-gettext 提 供 的 功 
能 完全 支持 从 应 用 内 部 插值 。 





























<h1i translate>Hello {{name}}</h1i> 


这 还 可 以 支持 翻译 复数 表示 法 。 例 如 ， 比 如 你 想 要 将 apple 翻 译 为 它 的 复数 形式 apples。 





<h1 translate>One apple</h1> 


你 可 以 添加 两 个 甚至 更 多 指令 给 cht> 元 素 ， 来 表示 当前 计数 以 及 要 翻译 的 最 终 字符 串 。 


<h1 translate 
translate-n="count" 


translate-plural="{{ count }} apples"> 
One apple 
“Fnhty 


如 果 translate_n 表 达 式 的 结果 大 于 1， 那 么 gettext 就 使 用 branslate_pural 中 的 字符 串 ; 
否则 ， 它 使 用 DOM 元 素 ch1y> 的 值 。 


这 个 附加 的 translate-n 指 令 接 受 任意 形式 的 Angular 表 达 式 , 包括 函数 。 关 于 表达 式 的 更 多 
信息 ， 请 查看 第 6 章 。 








translate-pural 就 是 一 个 简单 的 字符 串 ， 它 会 在 这 个 指令 被 调用 时 替换 DOM 元 素 内 的 值 。 
最 后 ， 你 还 可 以 在 应 用 内 使 用 translate 过 滤器 。 因 为 有 时 候 我 们 不 能 使 用 指令 ， 例 如 : 





<input type="text" placeholder="Username"/> 


还 可 以 使 用 translate 过 小 器 来 替换 占 位 符 中 Username 的 值 。 





<input type="text" placeholder="{{'Username' | translate }}"/> 


27.10 字符 串 提 取 
现在 , 我 们 不 再 提前 提供 需要 翻译 的 字符 串 ， 而 是 从 模版 中 提取 字符 串 来 构建 翻译 。 我 们 将 
会 生成 一 个 .pot 文 件 ， 也 就 是 标准 的 gettext 模 板 。 
要 提取 那些 要 翻译 的 字符 串 ， 最 简单 的 方法 就 是 使 用 grunt-angular-gettext 工 具 


-NO 














OO 关于 Grunt 的 更 多 信息 ， 请 查看 34.3 节 。 


为 了 使 用 grunt-angular-gettext 这 个 Grunt 任 务 ， 首 先 需 要 使 用 npm 安 装 它 : 
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$ npm install grunt-angular-gettext --save-dev 


这 个 Grunt 任 务 安装 好 之 后 ， 还 需要 在 Gruntfile 中 加 载 它 。 使 用 标准 的 Grunt 方 法 引用 Grunt 
任务 时 ， 可 以 像 这 样 在 cruntfile 内 部 启用 它 : 


grunt .loadNpmTasks( 'grunt-angular-gettext' ); 
设置 好 之 后 , 还 需要 从 应 用 中 提取 要 翻译 的 字符 串 。 可 以 使 用 nggettext_extract 任 务 做 到 。 
为 了 设置 这 个 任务 ,需要 提供 相应 的 配置 信息 。 

实际 上 ， ee 中 最 重要 的 是 files 属 性 : 











grunt .initCconfig({ 
nggettext_extract: { 
pot: { 
files: { 
'po/template.pot': ['src/view/*.html'] 
} 


} 
Fo 


此 外 ， 还 可 以 在 任务 中 包含 一 些 选 项 ， 设 置 起 始 和 终止 标识 符 。 如 果 要 配置 Angular 使 用 不 
同 的 分 隔 符 ， 那 么 可 以 在 这 个 任务 中 设置 这 些 选项 : 


grunt.initConfig({ 
nggettext_extract: { 





pot: { 
options: { 
startDelim: '//', 
endDelim: '//' 
3} 
files: { 
'po/template.pot': ['src/view/*.html'] 
} 
} 


} 
}); 


这 样 ， 就 可 以 使 用 Grunt 运 行 这 个 任务 了 ， 就 像 这 


$ grunt nggettext_extract 


这 个 任务 运行 完成 后 ， 将 会 得 到 一 个 po/template.pot 文 件 。 例 如 ， 对 于 这 个 模板 : 


st 





<div ng-controller="HomeController"> 

<h1 translate>Hello {{ user.name }}</h1> 

<h2 translate translate-n="count" translate-plural="{{ count }} books">{{ count }} books 
</h2> 
</div> 


这 会 得 到 一 个 po/template.pot 文 件 ， 它 看 起 来 像 ; 


msgid "" 

msgstr "" 

"Content-Type: text/plain; charset=UTF-8\n" 
"Content-Transfer-Encoding: 8bit\n" 
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#: app/index.html 

msgid "{{ count }} books" 
msgid_plural "{{ count }} books" 
msgstr[9] "" 

msgstr [1] "" 


27.11 翻译 字符 串 


现在 我 们 已 经 有 准备 好 的 .pot 文 件 了 , 可 以 开始 翻 








圣 它 了 。 使 用 开源 软件 的 一 个 主要 原因 


可 以 使 用 很 多 工具 为 我 们 有 效 地 创建 翻译 数据 。 





这 里 将 重点 关注 如 何 使 用 Poedit 工 具 ， 这 是 一 个 能 够 编辑 .pot 文 件 的 开源 工具 。 


首先 ， 我们 需要 下 载 这 个 工具 。 可 以 从 Poedit 网 站 www.poedit.net" 得 到 它 。 


装 好 这 个 工具 后 
ee 


后 ， 就 可 以 打开 应 用 程序 ， 然 后 选择 “文件 一 新 建 POT 文 件 .….” 


Catalogs Manager 





New Catalog... 
New Catalog from POT File... 
Open... $0 
Close BW 
图 27-1 ”新建 POT 文 件 
从 这 里 ， 可 以 找到 文件 并 选择 它 。 要 确保 包含 如 下 复数 形式 ， 如 图 27-2 所 示 。 
Lv WW 区 








Project name and version; 
Team: 

Team's email address: 
Language': 

Charset: 


Source code charset: 


Source text: 


_ Catalog properties 


Translation 


EM Sources paths Sources keywords 


es 


UTF-8 (recommended) 





Plural Forms: [nplurals=2; plural=(n > 1) 


translators: 





征 


， 如 图 27-1 





Learn about plural forms 


一 > 


Cancel 


Translation: 














图 27-2 ”设置 复数 
选择 OK， 然 后 你 应 该 被 带 入 一 个 显示 要 翻译 的 字 


攻 式 
符 串 的 界面 。 然 后 应 该 针对 特定 的 语言 填 








CD http://www.poedit.net/ 
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写 这 些 字 符 串 。 
例如 ， 如 果 想 将 应 用 翻译 成 西班牙 语 ， 就 应 该 使 用 es 语言 。 然 后 按照 gettext 的 约定 将 它 另 
存 为 es.po 文 件 存储 在 templates.pot 所 在 的 目录 ， 如 图 27-3 所 示 。 


@oe es.po 
忆 司 mm 
:一 = Ea 

Validate Update Fuzzy Comment 
Source text Translation 

{{ count j book {{ count jj libro 

Hello {{ user.name 并 Hola {{ user.name }} 
Source text: Notes for translators: 
singular: | {{ count }} book 


plural: | {{count} books 


Translation: 


ET Form 1 (e.g. "2") } 








[tfcount jlibro 


50 % translated, 2 strings (1 fuzzy) 


图 27-3 ”翻译 应 用 
完成 编辑 工作 之 后 ， 可 以 保存 这 个 文件 ， 然 后 继续 。 





如 果 对 应 用 做 出 了 改变 ， 可 以 简单 地 重新 运行 Grunt， 然 后 在 Poedit 中 选择 “更 
新 POT 文 件 .."。 这 个 步骤 会 更 新 新 字符 串 ， 移 除 旧 值 ， 然 后 指出 变化 的 部 分 ， 
如 图 27-4 所 示 。 


Update from Sources 


Update from POT File... 


Automatically Translate Using TM 
Purge Deleted Translations 
Validate Translations 


Properties... $ePp 


图 27-4 ”翻译 应 用 





27.12 ”编译 新 语言 


最 后 ， 可 以 使 用 新 的 已 编译 好 的 语言 格式 来 生成 新 的 translation.js 文 件 。 

在 此 期 间 会 多 次 使 用 Grunt 将 .pot 文 件 编译 为 在 运行 时 使 用 的 translation. js 文件 。 

这 里 还 需要 添加 一 个 新 的 任务 : nggettext_compile 任 务 ， 这 个 任务 会 获取 你 的 .pot 文 件 ， 
然后 将 它们 包装 为 可 以 在 应 用 中 使 用 的 语言 。 

基本 的 任务 配置 看 起 来 像 这 样 : 


grunt .initConfig({ 
nggettext_compile: { 
all: { 
files: { 
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局 
了 


i 


ba 
下 


27.13 改 


['po/*.pot'] 





"app/scripts/translations.js': 


] ) 
这 个 配置 会 使 用 所 有 的 po/*.pot 文 件 生成 app/scripts/translations.js 文 件 。 
也 可 以 指定 一 个 想 要 定义 在 translations 内 的 特定 模块 ， 比 如 : 


grunt.initConfig({ 
all: { 
options: { 
module: 'myApp.translations' 
['po/*.pot'] 


}; 


files: { 
'app/scripts/translations.js': 


}) 
建议 设置 一 个 Grunt 任 务 来 调用 这 两 个 nggettext_*# 函 数 ， 比 如 grunt .register 
"nggettext_compile']);。 
要 将 这 个 文件 包含 





['nggettext_extract', 


Task ('default', 
现在 ,运行 Grunt 任 务 时 ， 它 会 为 我 们 生成 translations.js 文 件 。 而 我 们 只 


在 运行 时 的 .html 文 件 中 ， 然 后 应 用 就 已 经 做 好 翻译 的 准备 了 。 








27.13 ”改变 语言 
至 此 我 们 已 经 设置 好 语言 了 ， 然 后 可 以 使 用 这 些 翻译 来 支持 不 同 的 语言 。 
gettext 模 块 还 包含 一 个 叫做 gettextCatalog 的 服务 ,这 个 服务 可 以 注入 到 应 用 中 设置 当前 








语言 。 为 了 设置 默认 语言 ， 可 以 简单 地 调用 它 : 


angular .module( 'myApp') 
.run(function(gettextCatalog) { 
gettextCatalog.currentLanguage = 'es'; 


上 
旦 序 的 内 容 当 作 西 班 牙 语 加 载 。 
注意 ， 也 可 以 在 系统 运行 时 做 同样 的 事情 ， 只 需 将 gettextCatalog 注 人 到 Angular 对 象 中 ， 








上 面 这 段 代 码 会 把 应 用 条 


就 像 这样 : 


.controller('HomeController', function($scope, gettextCatalog) { 


$scope.user = { name: "Ari" }; 
$scope.count = 1; 
$scope.changeLanguage = function() { 
gettextCatalog.currentLanguage = 'es'; 


} 


}) 
英文 状态 ， 如 图 27-5 所 示 。 
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Bee Localize me Mu 


Hello Ari 
1 book 





Change to Spanish 





图 27-5 ”英语 
改变 语言 之 后 的 西班牙 语 ， 如 图 27-6 所 示 。 
Bee Localize me 





Hola Ari 


1 libro 


Change to Spanish 








图 27-6 ”西班牙 语 
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在 大 型 的 、 互 联网 规模 的 Web 应 用 中 ， 限 制 从 客户 端 调用 API 的 能 力 使 我 们 能 够 创建 可 伸缩 
的 Web 应 用 。 

这 不 仅 让 前 端 呈 现 更 快 、 更 具 响 应 性 ， 还 通过 减少 后 端 工作 量 的 方式 保护 了 后 端 。 这 样 ， 后 
端 就 可 以 在 前 端 服务 于 更 多 的 用 户 。 


28.1 什么 是 缓存 

一 个 缓存 就 是 一 个 组 件 , 它 可 以 透明 地 存储 数据 ， 以 便 未 来 可 以 更 快 地 服务 于 请 求 。 绥 存 不 
需要 时 常 重 新 计算 的 数据 是 安全 的 ， 而 重新 获取 数据 会 导致 数据 重复 。 

绥 存 能 够 服务 的 请 求 越 多 ， 整 体系 统 性 能 就 提升 得 越 多 。 

传统 的 缓存 服务 器 ， 比 如 Memcache， 可 以 是 为 客户 端 内 容 提供 服务 的 同一 系统 或 者 是 远程 
系统 。 上 归根 结 底 都 是 在 服务 器 容量 和 流量 这 些 选 项 之 间作 出 选择 。 


根据 内 容 的 易 变 性 ,我们 可 以 将 精力 集中 于 存储 那些 需要 长 期 存储 的 缓存 内 容 ( 比如 ,存储 
在 磁盘 中 或 者 对 于 短期 存储 的 内 容 就 保存 在 内 存 中 )。 

缓存 就 像 一 个 很 大 的 键 - 值 存储 。 一 个 键 指向 一 块 缓存 的 内 容 。 当 请 求 这 部 分 内 容 时 ， 如 果 
在 缓存 中 找到 这 个 键 并 发 现 它 有 效 〈 即 命中 缓存 )， 那 么 就 为 这 个 请 求 提供 相关 内 容 。 

如 果 没 有 这 个 键 〈 即 没 找到 缓存 内 容 )， 那 么 缓存 服务 器 就 需要 知道 如 何 获取 相关 数据 ,， 存 
储 它 ， 然 后 为 原始 请 求 返回 数据 。 


本 章 ， 我 们 将 讨论 Angular 中 的 缓存 策略 ， 包 括 如 何 为 服务 器 端 内 容 设 置 memcache ( 轻 量 级 
的 ) 以 及 使 用 Angular 内 置 的 缓存 机 制 。 它 提供 了 一 些 很 棒 的 库 供 我 们 使 用 。 


28.2 Angular 中 的 缓存 


Angular 提 供 的 内 置 缓存 服务 是 一 个 很 方便 的 特性 ， 它 让 我 们 能 够 使 用 同一 机 制 来 缓存 自 定 
义 内 容 。 



































28.2.1 $cacheFactory 简介 


$cacheFactory 是 一 个 为 所 有 Angular 服 务 生成 缓存 对 象 的 服务 。 在 内 部 ，$cacheFactory 会 
创建 一 个 默认 的 缓存 对 象 ， 即 使 我 们 并 没有 显示 地 创建 。 
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要 创建 一 个 缓存 对 象 ， 可 以 使 用 $cacheFactory 通 过 一 个 ID 创建 一 个 缓存: 




















var cache = $cacheFactory( 'myCache ' ) ; 
这 里 ， 定 义 了 一 个 ID 为 mycache 的 缓存 。 这 个 $cacheFactory 方 法 可 以 接受 两 个 参数 : 


cacheId (字符 串 ) : 这 个 cacheId 就 是 创建 缓存 时 的 ID 名 称 。 可 以 通过 get( ) 方 法 使 用 缓存 
名 称 来 引用 它 。 


options (对象 ) : 这 个 选项 用 于 指定 缓存 如 何 表现 。 一 般 情况 下 ,这 个 选项 对 象 是 一 个 键 : 
口 capacity (数字 ) 

这 个 容量 描述 了 在 任何 给 定时 间 要 使 用 缓存 存储 并 保存 的 缓存 键 值 对 的 最 大 数量 。 
$cacheFactory() 方 法 返回 一 个 缓存 对 象 。 
































28.2.2 缓存 对 象 
缓存 对 象 自身 有 下 列 这 些 方法 可 以 用 来 与 缓存 交互 。 
info(): info() 方 法 返回 缓存 对 象 的 ID 、 尺 寸 和 选项 。 
put() : put() 方 法 允许 我 们 把 任意 JavaScript 对 象 值 形式 的 键 (字符 串 ) 放 进 缓存 中 。 





cache.put("hello", "world"); 
put() 方 法 会 返回 我 们 放 入 缓存 中 的 值 。 


get(): get() 方 法 让 我 们 能 够 访问 一 个 键 对 应 的 缓存 值 。 如 果 找 到 了 这 个 键 , 它 会 返回 它 的 
值 ， 如果 没 有 找到 ， 它 会 返回 undefined。 





cache.get("hello"); 


remove( ) : remove( ) 函数 用 于 在 找到 一 个 键 值 对 的 情况 下 从 缓存 中 移 除 它 。 如 果 没 有 找到 ， 
它 就 会 返回 undefined。 





cache.remove( "hello"); 
removeA11( ) : removeA11( ) 子 数 用 于 重 置 缓存 ， 同 时 移 除 所 有 已 缓存 的 值 。 
destory() : destory() 方 法 用 于 从 $cacheFactory 绥 存 注册 表 中 移 除 指定 缓存 的 所 有 引用 。 


28.3 $http 中 的 缓存 


Angular 的 $http 服 务 创建 了 一 个 带 有 也 为 $http 的 缓存 。( 很 意外 ， 对 吗 ? ) 要 计 $http 请 求 
使 用 默认 的 缓存 对 象 很 简单 : $http( ) 方 法 允许 我 们 给 它 传递 一 个 cache 参 数 。 





28.3.1 默认 的 $http 缓 存 
当 数 据 不 会 经 常 改变 时 ， 默 认 的 $nttp 缓 存 就 特别 有 用 了 。 可 以 像 这 样 设置 它 : 
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$http({ 
method: "GET ' ， 
url: '/api/users.json', 
cache: true 
// 或 者 使 用 辅助 方法 .get() 
$http.get('/api/user.json', { 
cache: true 


}); 

现在 ， 通 过 $http 到 URL/api/user. json 的 每 个 请 求 将 会 存储 到 默认 的 $http 缓 存 中 。 这 个 
$http 绥 存 中 的 请 求 键 就 是 完整 的 URL 路 径 。 

通过 在 $http 选 项 中 传人 参数 true ， 可 以 告诉 $http 服 务 使 用 默认 的 缓存 。 如 果 我 们 不 想 经 
常 干 扰 那 些 缓存 ， 使 用 默认 缓存 是 很 有 用 的 。 

然而 ， 如 果 需 要 ， 也 可 以 操作 这 个 默认 的 $http 组 存 ( 比如， 如 果 我 们 发 起 的 另外 一 个 没有 
绥 存 的 请 求 提 醒 我 们 发 生 了 增 量 变化 ， 我 们 就 可 以 在 默认 的 $nttp 请 求 中 清除 这 个 请 求 )。 

为 了 引用 $http 的 默认 请 求 ， 只 需 通 过 $cacheFactory( ) 使 用 ID 来 获取 到 该 缓存 : 














var cache = $cacheFactory('$http'); 


对 于 所 掌控 的 缓存 ,我 们 可 以 在 需要 时 进行 所 有 的 正常 操作 ， 比 如 检索 已 缓存 的 响应 ， 从 组 
存 中 清除 条 目 ， 或 者 消除 所 有 缓存 的 引用 。 


// 获取 上 一 次 请 求 的 缓存 

var usersCache = cache.get('http://example.com/api.users.json'); 
// 删除 上 一 次 请 求 的 缓存 入 口 

cache .remove( 'http://example.com/api .users. json'); 

// 重新 开始 并 移 除 全 部 缓存 


cache .removeAl11() ; 


尽管 可 以 引用 默认 缓存 , 但 是 有 时 候 能 够 对 缓存 有 更 多 的 控制 以 及 针对 缓存 的 表现 创建 规则 
可 能 更 有 用 。 这 就 需要 创建 一 个 新 的 缓存 来 使 用 $http 请 求 。 























28.3.2” 自 定义 缓存 


通过 自 定义 的 缓存 来 让 $nttp 请 求 发 起 请 求 很 简单 。 可 以 采用 传递 缓存 实例 的 方式 ， 而 不 必 
传递 一 个 布尔 参数 true 给 请 求 。 


var myCache = $cacheFactory( 'myCache ' ) ; 
$http({ 

method: "GET ' ， 

utl: '/api/users.json’', 

cache: myCache 
外 
// 或 者 使 用 辅助 方法 .get() 
$http.get('/api/users.json', { 

cache: myCahe 


}); 
现在 ，$http 将 会 使 用 自 定义 的 缓存 而 非 默认 缓存 。 
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28.4 为 $http 设置 默认 缓存 
尽管 这 很 容易 ， 但 是 每 次 我 们 想 要 发 起 一 个 $http 请 求 时 都 要 给 它 传递 一 个 缓存 实例 并 不 方 
便 ， 特 别 是 对 每 个 请 求 使 用 同一 缓存 的 时 候 。 
其 实 可 以 在 模块 的 .config( ) 方 法 中 通过 $httpProvider 设 置 $http 默 认 使 用 的 缓存 对 象 。 














angular.module('myApp'，[]).config(function($httpProvider) { 
$httpProvider .defaults.cache = $cacheFactory('myCache', {capacity: 20}); 


上 
这 个 $http 服 务 不 再 使 用 它 为 我 们 创建 的 默认 缓存 ; 它 会 个 
就 是 一 个 近期 缓存 最 久未 使 用 算法 ”( Least Recently Used，LRU )。 
LRU 缓 存根 据 缓存 容量 只 保留 最 新 的 缓存 数目 。 也 就 是 说 ， 我 们 的 缓存 容量 为 20， 
因此 会 缓存 前 20 个 请 求 ， 但 是 进入 第 21 个 请 求 时 ， 最 近 最 少 使 用 的 请 求 条 目 就 会 从 缓存 
中 被 删除 。 这 个 缓存 自身 会 负责 具体 哪些 要 维护 ， 哪 些 要 移 除 。 


用 我 们 自 定 义 的 缓存 ， 实 际 上 这 











: LRU ( en.wikipedia.org/wiki/ 








F 这 个 算法 丢弃 最 近 最 少 使 用 的 缓存 。 参考 : 维基 百科 








全 LRU 是 一 种 高 速 缓存 信 法 o 基于 
Least Recently Used#LRU ),。 一 一 译 者 注 
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安全 性 











对 于 任何 客户 端 应 用 而 言 ， 应 该 在 构建 时 就 考虑 其 安全 性 。 然 而 在 任何 情况 下 都 很 难 实现 
100% 的 保护 ， 尤 其 是 当 客 户 问 应 用 能 看 到 全 部 代码 的 情况 下 ， 将 更 加 困难 。 

在 这 一 章 , 我 们 来 看 看 一 些 保持 应 用 程序 安全 的 技术 。 我 们 将 会 看 到 如 何 掌 握 $sce 服 务 , 通 
过 使 用 指令 包装 授权 请 求 的 方式 ， 保 障 文本 输入 框 的 安全 性 ( 在 讨论 受 保护 的 后 端 时 )。 

















29.1 严格 的 上 下 文 转 义 : $sce 服务 


严格 上 下 文 转 义 模 式 (在 Angular 1.2 及 更 高 版 本 中 默认 可 用 ) 用 于 告诉 我 们 的 应 用 ， 它 需要 
绑 定 在 某 个 上 下 文中 ， 以 便 生成 在 该 上 下 文中 被 标记 为 可 信 的 值 。 

例如 ， 当 我 们 想 要 使 用 ng-bind-html 绑 定 一 个 未 加 工 的 HTML 给 一 个 元 素 时 ， 我 们 希望 
Angular 使 用 这 个 HIML 浑 染 该 元 素 ， 而 不 是 转 义 的 文本 。 


< 七 extarea ng-model="htmlBody"> </textarea> 
<div ng-bind-html="{{ htmlBody }}">¢/div> 


$sce 是 一 个 非常 出 色 的 服务 , 它 允 许 我 们 编写 白 名 单 ， 默认 保 护 代码 ， 并 在 很 大 程度 上 帮助 
我 们 防止 XSS 和 其 他 漏洞 。 鉴 于 这 种 能 力 ， 理 解 它 到 底 是 什么 很 重要 ， 这 样 我 们 才 可 以 明智 地 使 
用 它 。 

在 上 面 的 例子 中 ,给 ctextarea> 绑 定 了 一 个 htmlBody 模 型 。 在 这 个 textarea 中 ， 用 户 可 以 
输入 他 们 想 在 div 中 呈现 的 任意 代码 。 例 如 ， 可 能 是 编辑 博客 或 者 是 评论 时 的 实时 预览 ， 等 等 。 

如 果 用 户 可 以 输入 任意 文本 到 这 个 文本 字段 中 , 这 本 质 上 相当 于 开启 了 一 个 巨大 的 安全 漏洞 。 

默认 情况 下 $sce 服 务 会 在 所 有 插值 表达 式 上 为 我 们 处 理 这 一 问题 ,不 确定 的 字面 量 永远 都 是 
不 可 信和 的 。 

实质 上 , 从 Angular 1.2 及 更 高 版 本 的 内 置 指令 开始 , $scope 中 的 值 就 不 再 是 绑 定 给 它 的 值 了 ， 
而 是 绑 定 $sce .getTrusted( ) 方 法 的 返回 结果 。 

指令 也 使 用 新 的 $sce .parseAs( ) 方 法 砍 代 $parse 服 务 监 控 属 性 绑 定 。$sce.parseAs( ) 方 法 
会 在 所 有 非 恒 定 的 字面 量 上 调用 $sce .$getTrusted( ) 方 法 。 


实际 上 ，ng-bind-html 指 令 会 在 幕后 调用 $sce.parseAsHtml() 方 法 ， 然 后 将 返回 值 绑 定 给 
DOM 元 素 。ng-include 指 令 以 及 任何 定义 在 指令 上 的 templateUr1 都 会 执行 这 一 行为 。 
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启用 这 一 特性 时 , 所 有 内 置 指令 都 会 自动 调用 $sce。 当 然 , 在 自己 的 指令 或 者 其 他 自 定 义 组 
件 中 ， 也 可 以 使 用 这 一 行为 。 


要 设置 $sce 保 护 ， 需 要 注入 $sce 服 务 。 





angular .module( 'myApp', []) 
.directive( 'myDirective', ['$sce', function($sce) { 
// 这 里 有 权 使 用 sce 服 务 
}13 


.Controller('MyController', ['$scope', '$sce', function($scope, $sce) { 
// 这 里 也 有 权 使 用 sce 服 务 
}]); 


在 上 面 的 指令 和 控制 器 内 ， 我 们 和 希望 Angular 能 够 允许 受信 任 的 内 容 回 到 视图 内 ， 同 时 接受 
可 信任 的 插值 输入 。 


$sce 服 务 有 一 个 简单 的 API， 让 我 们 能 够 设置 和 获取 明确 特定 类 型 的 可 信任 内 容 。 


例如 ， 要 构建 一 个 邮件 预览 程序 。 这 个 邮件 客户 端 会 允许 用 户 在 他 们 的 邮件 中 编写 HTML; 
而 我 们 希望 给 他 们 的 文本 提供 一 个 实时 预览 。 


其 中 用 到 的 HTML 看 起 来 可 能 像 这 样 : 











<div ng-app="myApp"> 
<div ng-controller="MyController"> 
< 七 extarea ng-model="email.rawHtml"></textarea> 
<pre ng-bind-html="email.htmlBody"></pre> 








现在 ， 注 意 这 里 email 上 不 同 的 属性 : email.rawHtml 和 email.htmlBody 会 获取 到 
<textarea> </textarea》 中 的 大 上 段 文本 。 在 控制 器 内 部 ， 会 将 email .rawHtml 解 析 为 HTML， 然 
后 再 输出 到 浏览 器 中 。 


在 控制 器 内 ,可 以 设置 一 个 $watch 监 控 email.rawHtml 的 变化 ,然后 无 论 什 么 时 候 发 生变 化 
都 在 HTML 内 容 上 运行 一 个 受信 任 的 解析 器 。 























.Controller('MyController', ['$scope', '$sce', function($scope, $sce) { 
// 在 email.rawHtml 上 设置 监控 
$scope.$watch('email.rawHtml', function(v) { 
// 假设 在 非 编译 ($compile) 阶 段 
if(v) { 
// 将 htmlBody 泻 染 为 受信 任 的 HTML 
$scope.email.html Body = $sce.trustAsHtm1l($scope.email.rawHtml ) ; 


}); 
]; 


现在 ， 每 当 email.rawHtml 的 内 容 发 生变 化 时 ， 都 会 在 这 个 内 容 上 执行 一 个 解析 器 ， 然 后 取 
回 适 当 的 HTML 内 容 。 而 这 个 内 容 会 被 演 染 为 干净 的 HTML， 也 就 是 应 用 程序 的 安全 来 源 。 

假如 还 希望 页 面 上 能 执行 用 户 编写 的 自 定 义 JavaScript 会 怎样 呢 ? 例如 ,希望 允许 用 户 编 写 含 
自 定 义 JavaScript 的 电子 贺卡 ， 那 么 就 要 允许 他 们 在 页 面 让 运行 自 定 义 的 JavaScript 代 码 。 

要 用 到 的 HTML 看 起 来 可 能 像 这 样 ， 


< 七 extarea ng-model="email.rawJs"></textarea> 
<pre ng-bind="email.jsBody"></prey> 
<button ng-click="runJs()">Run</buttony> 
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在 这 段 代 码 中 ， 其 运行 原理 与 解析 原始 文本 为 安全 文本 一 致 。 这 次 ， 还 要 添加 第 三 个 元 素 ， 
也 就 是 在 作用 域 中 调用 runJs( ) 的 按钮 。 
正如 在 HTML 绪 定 中 看 到 的 ， 我 们 会 监控 这 个 JavaScript 代 码 片段 : 


.controller('MyController', ['$scope', '$sce', function($scope, $sce) { 
// 在 email.rawJs 上 设置 监控 
$scope.$watch('email.rawJs', function(v) { 
if(v) { 
$scope.email. jsBody = $sce.trustAsJs($scope.email .rawyJs); 
} 
Bh: 
}1); 


注意 , 这 次 我 们 没有 使 用 trustAsHtml, 而 是 使 用 trustAsJs( ) 方 法 。 这 个 方法 会 告诉 Angular 
将 指定 的 文本 解析 为 可 执行 的 JavaScript 代 码 。 调用 结束 后 , 这 会 得 到 一 个 可 以 在 应 用 程序 上 下 文 
中 使 用 eval( ) 执 行 的 、 安 全 的 、 已 解析 的 JavaScript 代 码 片 段 。 

现在 可 以 将 runJs( ) 方 法 设置 给 用 户 ， 然 后 可 以 应 用 email .rawJS 来 运行 这 个 代码 片段 。 

OA 


$scope.runJs = function() { 
eval($scope.email. jsBody.toString()); 





}; 
对 于 在 JavaScript 代 码 片 段 上 执行 eval ， 还 有 更 智能 的 方法 。 但 是 不 推荐 在 产品 中 
使 用 eval。 


Angular 中 还 提供 了 内 置 的 保护 机 制 : 只 能 从 加 载 应 用 的 同一 域 中 以 及 应 用 所 在 的 协议 内 加 
载 模板 。Angular 通 过 在 templateUrl 上 强制 调用 $sce .getTrustedResourceUr1 来 对 它 进 行 保护 。 


这 个 协议 不 能 替代 浏览 器 的 同 源 策略 以 及 跨 域 资 源 共 享 (CORS )。 这 些 策 略 仍然 能 够 有 效 保 
护 浏 览 需 


但 是 可 以 通过 使 用 $sceDelegateProvider 设 置 域 白 名 单 或 者 黑 名 单 的 方式 来 改写 这 个 值 。 


























29.2 URL 白 名 单 
在 模块 的 config( ) 了 负数 内 可 以 设置 新 的 白 名 单 和 黑 名 单 。 





Bs 


angular .module( 'myApp', []) 
.config(['$sceDelegateProvider', function($sceDelegateProvider) { 

// 设置 一 个 新 的 白 名 单 

$sceDelegateProvider .resourceUr1lwhitelist(['self']); 
}1); 
可 以 使 用 resourceUrlwhitelist() 方 法 设置 新 的 白 名 单 。 这 个 函数 接受 一 个 可 选 的 参数 。 
口 白 名 单列 表 (数组 )。 
如 果 没 有 传人 参数 ,那么 这 个 函数 就 作为 一 个 getter 方 法 ,同时 返回 当前 设置 的 白 名 单数 组 。 
如 果 传 入 了 白 名 单 参 数 ，resourceUr1Whitelist 就 会 使 用 新 的 数组 蔡 换 原来 的 数组 。 


每 个 数组 元 素 必 须 是 一 个 正则 表达 式 或 者 是 字符 串 'self' 。 当 设置 为 'self' 时 ，Angular 会 
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确保 所 有 的 URL 都 只 匹配 与 应 用 所 在 域 一 致 的 URL。 使 用 一 个 正则 表达 式 时 ，Angular 会 匹配 与 
测试 资源 对 应 的 绝对 URL 。 


如 果 这 个 数组 为 空 ，$sce 会 阻塞 所 有 的 URL。 





使 用 'self' 时 可 以 在 HTML 文 档 中 使 用 https 协 议 的 资源 。 
为 了 启动 每 个 独立 的 URL， 每 个 域 都 要 加 入 白 名 单 : 


angular .module( 'myApp', []) 
.config(['$sceDelegateProvider', 
function($sceDelegateProvider) { 
// 设置 新 的 白 名 单 
$sceDelegateProvider.resourceUrlWhitelist(['.*']); 


}]); 
默认 情况 下 ， 白 名 单 被 设置 为 ['self']。 





29.3 ”URL 黑 名 单 
也 可 以 使 用 黑 名单 URL 蔡 换 白 名 单 。 它 通常 比 依靠 白 名 单 更 安全 , 但 是 你 可 以 结合 使 用 它们 。 
对 于 可 信任 的 域 而 言 ， 白 名 单 很 有 用 ; 黑 名 单 通常 服务 于 域名 重 定向 操作 。 
可 以 使 用 resourceUr1lBlacklist() 方 法 设置 新 的 黑 名 单 。 这 个 方法 也 接受 一 个 可 选 的 参数 。 
口 黑 名 单列 表 (数组 )。 
如 果 没 有 传人 参数 ， 这 个 函数 就 会 返回 当前 设置 的 黑 名 单数 组 。 
如 果 传人 了 黑 名 单 参数 ， 新 的 数组 就 会 替换 原来 的 黑 名 单 。 


黑 名 单数 组 中 的 每 个 元 素 必须 是 一 个 正则 表达 式 或 者 是 字符 串 'self' ,尽管 在 使 用 黑 名 单 的 
情况 下 ， 它 没什么 用 。 但 是 使 用 正则 表达 式 时 ， 它 匹配 与 测试 资源 相对 的 绝对 URL。 


对 于 可 信任 的 内 容 ， 黑 名 单 总 是 最 后 才 决 定 什么 是 可 接受 的 ， 什 么 是 不 可 接受 的 。 
默认 情况 下 ， 黑 名 单 被 设置 为 一 个 空 数组 [ ] 。 



































由 























29.4 $sce API 
$sce 库 中 有 两 个 我 们 会 用 到 的 主要 函数 ， 以 及 一 系列 辅助 函数 。 





29.4.1 getTrusted 
要 获取 一 个 特定 类 型 的 可 信任 版 本 的 值 ， 可 以 调用 getTrusted( ) 方 法 。 
这 个 getTrusted( ) 方 法 接受 两 个 参数 。 
口 类 型 (字符 串 )。 


这 个 字符 串 代表 使 用 该 值 的 上 下 文 类 型 。 对 于 可 用 类 型 可 以 查看 sce 类 型 列表 。 
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DO maybeTrusted 
这 个 值 是 从 $sce.trustAs 返 回 的 值 。 如 果 无 效 ， 它 抛 出 一 个 异常。 
$sce 库 还 有 一 些 适 用 于 getTrusted( ) 方 法 的 辅助 方法 。 











下 列 方法 的 调用 从 功能 上 讲 是 等 价 的 : 
getTrustedCss(value) getTrusted($sce.CSS, value) 
getTrustedHtml (value) getTrusted($sce.HTML, value) 
getTrustedJs(value) getTrusted($sce.JS, value) 
getTrustedResourceUr1l(value) getTrusted($sce.RESOURCE_URL, value) 
getTrustedUrl(value) getTrusted($sce.URL, value) 
29.4.2 parse 





类 似 于 $parse 服 务 , parse 方 法 用 于 将 Angular 表 达 式 转换 为 子 数 。 如 果 表 达 式 是 一 个 恒定 的 
字面 量 ， 它 就 调用 $parse 服 务 ; 否则 ， 调 用 $sce .getTrusted( ) 服 务 。 


parse( ) 方 法 接受 两 个 参数 。 

口 类 型 (字符 串 )。 

这 个 类 型 代表 使 用 该 值 的 $sce 上 下 文 类 型 。 对 于 可 用 类 型 可 以 查看 sce 类 型 列表 。 
口 表达 式 (字符 串 )。 

Angular 要 编译 的 表达 式 。 


parse( ) 方 法 返回 一 个 : function(context，1locals) 形 式 的 函数 : 





























口 context ( 对 象 )。 

这 个 对 象 表示 表达 式 应 该 在 哪里 被 求 值 。 通 常 是 一 个 gscope 对 象 。 
D locals ( 对象 )。 

局 部 变量 ， 在 context 中 重 写 值 时 非常 有 用 。 

$sce 库 有 一 些 适 用 于 parse( ) 方 法 的 辅助 方法 。 

下 列 方法 的 调用 从 功能 上 讲 是 等 价 的 : 














parseAsCss(expr) parseAs($sce.CSS, expr) 
parseAsHtml (expr) parseAs($sce.HTML, expr) 
parseAsJs(expr) parseAs($sce.JS，expr) 
parseAsResourceUr1(expr) parseAs($sce .RESOURCE_URL ，expr) 
parseAsUr1(expr) parseAs($sce.URL，expr) 


29.4.3 trustAs 


trustAs( ) 方 法 返回 一 个 对 象 ，Angular 信 任 该 对 象 ， 可 以 在 特定 的 严格 上 下 文 转 义 环境 中 使 
用 它 。 比 如 ng-bind-htm1 和 ng-include 绑 定 ， 使 用 给 它们 提供 的 值 。 


这 个 trustAs() 方 法 接受 两 个 参数 。 
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口 类 型 (字符 串 )。 

这 个 $sce 上 下 文 类 型 表示 哪里 的 值 是 安全 的 。 对 于 可 用 类 型 可 以 查看 sce 类 型 列表 。 
口 值 。 

这 个 值 表示 我 们 可 以 用 它 来 替代 提供 的 值 。 

trustAs( ) 方 法 返回 一 个 值 ， 可 以 用 于 Angular 期 望 $sce.trustAs() 返 回 值 的 地 方 。 
$sce 库 还 有 一 些 适用 于 trustAs() 方 法 的 辅助 方法 。 

下 列 方法 的 调用 从 功能 上 讲 是 等 价 的 : 









































trustAsHtml (value) trustAs($sce.HTML, value) 
trustAsJs(value) trustAs($sce.JS, value) 
parseAsResourceUr1(value) trustAs($sce.RESOURCE_URL, value) 
trustAsUrl(value) trustAs($sce.URL, value) 


29.4.4 isEnabled 


isEnabled( ) 方 法 没有 参数 ,同时 它 返 回 一 个 布尔 值 , 该 值 告诉 我 们 是 否 启用 了 了 sce 环境。 如 
果 启 用 了 ， 它 返回 true; 否则 返回 false。 


























29.5 ”配置 $sce 


如 果 想 在 运行 应 用 时 完全 禁用 sce 子 系统 > 么 做 ,默认 情况 下 它 还 是 提供 了 安 
全 性 保护 )， 可 以 在 应 用 的 config( ) 也 数 中 像 这 样 禁 


























angular .module( 'myApp', []) 
config(['$sceProvider', function($sceProvider) { 
// 关闭 SCE 
$sceProvider .enable(false); 


}1); 


29.6 ”可 信赖 的 上 下 文 类 型 


$sce 库 默认 情况 下 支持 五 个 内 置 的 上 下 文 类 型 。Angular 使 用 这 些 上 下 文 类 型 解析 和 确定 一 
个 上 下 文 与 另 一 个 上 下 文中 什么 是 安全 的 。 





























上 下文 描 述 
$sce HTML 告诉 Angular， 在 应 用 中 这 是 安全 HTML 来 源 
$sce.CSS 告诉 Angular， 在 应 用 中 这 是 安全 的 CSS 来 源 
$sce. URL 告诉 Angular， 这 个 带 URL 的 链接 是 安全 的 
$sce. RESOURCE_URL 告诉 Angular， 这 个 带 URL 的 链接 是 安全 的 ， 同 时 引入 应 用 的 内 容 也 是 安全 的 
$sce.JS 告诉 Angular， 在 应 用 程序 中 这 是 可 以 安全 执行 的 内 容 
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AngularJS 和 此 浏览 器 











最 新 版 本 的 Angular ( 1.3.0 ) "减少 了 对 IE8 的 支持 。 本 章 是 本 书 特意 为 1.2.x 版 留 下 的 。 


AngularJS 可 以 无 缝 地 运行 在 大 多 数 现代 浏览 器 中 , 在 Safari、Google Chrome 、Google Chrome 
Canary 以 及 FireFox 中 都 可 以 很 好 地 工作 ,但 在 臭名 昭著 的 IE8 以 及 更 低 版 本 中 则 可 能 会 有 些 
问题 。 


OO 欲 了 解 更 多 信息 ， 请 阅读 AngularJS 文 档 中 的 IE 使 用 指南 8。 





如 果 你 计划 为 IE8 及 更 低 版 本 的 正 浏 览 需 发 布 应 用 程序 , 则 需要 额外 注意 一 下 , 以 便 文 持 它们 。 
IE 浏 览 絮 不 希望 元 素 名 以 ng 开头 : 因为 它 会 认为 这 个 前 级 是 一 个 XML 命 名 空间 。 下 浏览 带 会 
忽略 这 些 元 素 ， 除 非 这 些 元 素 有 一 个 正确 的 命名 空间 声明 : 


<html xmlns:my="ignored"> 


@ 这 个 xmlns:ng="http:/angularjs.org" 会 让 正 更 好 地 工作 。 


如 果 和 希望 耻 能 够 识别 非 标准 的 HTML 标 签 ， 需 要 在 文档 头 部 创建 好 这 些 标签 。 在 文档 head 中 
可 以 这 样 做 。 


¢ldoctype html>» 
<html xmlns:ng="http://angularjs.org"> 
<head> 
<¢!--[if lte IE 8] 
<¢script> 
document.createElement( 'ng-view'); 


// 其 他 自 定义 元 素 


<¢/script> 

<¢! [endif]--> 
“</head> 
<body> 

《!-- ... ——> 





推荐 使 用 属性 (attribute ) 形式 的 指令 ， 这 样 就 无 需 创 建 自 定义 元 素来 支持 下 : 


<div data-ng-view> </div> 








QD 本 书 出 版 时 ，Angular 1.3 还 处 于 beta 版 阶段 ， 最 新 版 仍 为 1.2.x。 一 一 译 者 注 
©® http://docs.angularjs.org/guide/ie 
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为 了 让 AngularJS 能 在 IE7 及 更 早 版 本 中 工作 ， 还 需要 一 个 JSON.stringify polyfill”。 可 以 使 用 
JSON3? 或 者 JSON2? 实现。 


我 们 需要 根据 浏览 絮 的 类 型 来 引入 i 
的 某 个 地 方 ， 最 后 在 头 部 引用 它 ， 就 像 i 


<ldoctype html> 

<html xmlns:ng="http://angularjs.org"> 
<head> 

¢!--[if lte IE 8] 

script src="l1ib/json2.js">»<¢/script> 








个 文件 。 首先 需要 下 载 这 个 文件 , 将 它 存储 在 应 用 程序 
样 : 


这 
这 


¢! [endif]--> 
</head> 
<body> 

《!-- ... ——> 


此 外 ， 为 了 在 正中 使 用 ng-app 指 令 ， 还 要 设置 元 素 的 id 为 ng-app。 


<body id="ng-app" ng-app="myApp"> 
¢{-— ... ——» 


还 可 以 利用 angular-ui-utils 库 的 ie-shiv 模 块 帮助 我 们 在 DOM 中 提供 自 定义 元 素 。 


为 了 使 用 ui-utils 的 ie-shiv 库 ， 需 要 确保 安装 了 angular-ui 库 。 如 果 下 载 了 ui-utils 库 
同时 引入 了 这 个 模块 ， 那 么 安装 起 来 就 很 容易 了 。 可 以 在 Github 上 的 https://github.com/angular- 
uiui-utils 中 找到 这 个 ui-utils。 


先 来 确保 在 应 用 可 访问 的 位 置 包 含 了 ui-utils 模 块 ， 然 后 像 这 样 引入 这 个 文件 : 


¢!--[if lte IE 38) 

script type="text/javascript "> 

// 在 这 里 定义 自 定义 指令 

</script> 

<¢script src="lib/angular-ui-ieshiv.js">»<¢/script> 
¢![endif]--> 


在 这 里 , 我 们 仅仅 在 IE8 及 更 早 版 本 的 下 中 激活 了 ie-shiv。 这 个 shiv 人 允许 我 们 在 全 局 作用 域 
上 添加 自 定 义 指 令 ， 它 会 为 IE 创建 适当 的 声明 。 


这 个 shiv 库 会 查找 window.myCustomTags 对 象 。 如 果 定 义 了 window.myCustonTags ， 这 个 库 
会 在 加 载 时 引入 这 些 标签 ， 同 时 一 同 引 入 其 余 的 Angular 库 指令 
¢!--[if lte IE 83) 


<ScTript type="text/javascript"> 
// 在 这 里 定义 自 定义 指令 











window.myCustomTags = ['myDirective']; 

</script> 

<script src="lib/angular-ui-ieshiv.js"></scripty> 
¢! [endif]--> 





GD polyfiL 用 来 添加 一 些 原生 功能 支持 的 功能 。 更 多 信息 可 以 参考 “[ 译 ]shim 和 polyfill 有 什么 区 别 ”( www.cnblogs.com/ 
ziyunfei/archive/2012/09/17/268829.html ) 和 “HTML5 饮 事 : 一 袋 “ 腻 子 粉 ”的 故事 ( 待 续 六 (www.ituring.com.cny/ 
article/766 )。 一 一 译 者 注 

© http://bestiejs.github.io/json3/ 

© https://github.com/douglascrockford/JSON-js 

(@ https://github.com/angular-ui/ui-utils 
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30.1 Ajax 缓存 

常见 的 浏览 器 里 ， 正 是 唯一 缓存 XHR 请 求 的 。 为 了 避免 这 一 缺陷 ， 可 以 在 HTTP 响 应 关中 设 
置 Cache-Control 值 为 no-cache。 

这 是 现代 浏览 器 的 默认 行为 ， 使 用 它 可 以 为 琅 用 户 提 供 更 好 的 体验 。 

可 以 像 这 样 修改 每 个 请 求 的 默认 HTTP 头 : 


.config(function($httpProvider) { 
$httpProvider .defaults.headers.common['Cache-Control'] = 'no-cache'; 














站 


30.2 AngularJS 中 的 SEO 


诸如 Google 和 Bing 这 样 的 搜索 引擎 ， 都 抓 取 静 态 Web 页 面 ， 而 非 含 有 大 量 JavaScript 的 客户 端 
应 用 。 搜 索引 擎 机 器 人 通常 都 快速 、 高 效 地 抓 取 数据 ,因此 大 多 数 情 况 下 在 抓 取 页 面 时 不 会 泻 染 
JavaScript。 

这 是 因为 这 些 JavaScript 应 用 都 需要 一 个 JavaScript 引 人 擎 来 解释 它 ， 例 如 PhantomJS 或 者 v8 。 
Web 拒 虫 程序 通常 在 加 载 Web 页 面 时 并 不 会 使 用 JavaScript 解 释 器 。 


在 搜索 引擎 中 不 包含 JS 解释 器 有 充分 的 理由 : 因为 它们 不 需要 ,这 样 做 只 会 在 抓 取 
Web 页 面 时 更 慢 、 更 低 效 。 


30.3 使 Angular 应 用 可 被 索引 


有 几 种 不 同 的 方式 可 以 让 Google 处 理应 用 索引 。 一 个 常见 的 做 法 是 使 用 后 端 程序 为 你 的 
Angular 应 用 提供 服务 。 这 种 方法 的 优点 是 实现 简单 ， 不 会 有 太 多 重复 的 代码 。 

第 二 种 做 法 是 在 JavaScript 中 的 cnoscript> 标 签 内 泻 染 所 有 由 Angular 应 用 交付 的 内 容 。 稍 后 
会 简单 讨论 这 一 主题 ， 因 为 实现 cnoscript> 方 法 时 很 大 程度 上 取决 于 如 何 交 付 应 用 。 例 如 ， 可 
以 在 服务 端 泻 染 页 面 时 使 用 cnoscripty 。 
































30.4 服务 端 
Google 和 其 他 高 级 搜索 引擎 都 支持 hashbang 格 式 的 URL， 我 们 可 以 用 它 来 识别 当前 要 访问 的 
页 面 。 搜 索引 擎 会 将 这 个 URL 转 换 为 一 个 自 定 义 的 URL 格 式 ， 以 便服 务 器 可 以 访问 它们 。 


搜索 引擎 访问 这 个 URL ,并 期 待 获取 到 浏览 器 将 要 接收 的 HTML 完全 泻 染 过 的 HTML 内 容 )。 
例如 ，Google 会 把 hashbang 格 式 的 URL: 














http://www.ng-newsletter .com/#!/signup/page 
转变 为 URL: 


http://www.ng-newsletter.com/?+escaped_fragment_=/signup/page 
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在 我 们 的 Angular 应 用 中 ， 需 要 根据 我 们 所 使 用 的 URL 风 格 让 Google 以 不 同 的 方式 处 理应 用 
站 点 。 
30.4.1 hashbang 语 法 


Google 最 初 编写 Ajax 采 集 规范 就 是 为 了 使 用 hashbang 语 法 传送 URL， 这 是 一 个 为 JS 应 用 程序 
创建 永久 链接 的 原始 方法 。 


这 需要 在 应 用 路 由 中 使 用 hashPrefix (默认 的 ) 配置 我 们 的 应 用 : 








angular.module('myApp'，[) 
.configure(['$location'，function($location) { 
$location.hashPprefix('!'); 


}1); 


30.4.2 ”HTML5 路 由 模式 

新 的 HTML5 pushState 并 不 以 相同 的 方式 工作 : 它 会 修改 浏览 器 的 URL 和 历史 记录 。 为 了 让 
Angular 应 用 “欺骗 ”搜索 机 器 人 ， 可 以 在 header 中 添加 一 个 简单 的 元 素 : 

<meta name="fragment" content="!"> 


这 个 元 素 会 让 Google 蜂 蛛 使 用 新 的 疏 行 规范 来 抓 取 你 的 站 点 。 当 它 遇 到 这 个 标签 时 ， 它 会 使 
用 ?_escaped_fragment= 标 签 重新 访问 站 点 ， 而 不 是 采用 标准 的 抓 取 站 点 的 方式 。 


假设 要 在 $1ocation 服 务 中 使 用 HTML5 模 式 ， 可 以 像 这 样 设置 页 面 以 使 用 httml5Mode: 














angular .module( 'myApp', []) 

.configure({['$routeProvider', function($routeProvider) { 

$routeProvider .html15Mode(true ) ; 

}]); 
查询 字符 串 中 有 了 _escaped_fragment_ 后 ,我们 可 以 让 后 端 服务 需 提 供 静 态 的 HTML 而 不 是 

客户 端 应 用 。 


现在 ， 后 端 服务 器 可 以 检测 请 求 中 是 否 包含 escaped_fragment_ 字 段 ， 如 果 包 含 ， 我 们 将 
提供 静态 HTML 而 不 是 纯 Angular 应 用 。 














还 可 以 使 用 代理 实现 这 个 功能 ， 比 如 Apache 或 者 Nginx， 或 者 是 一 个 后 端 服务 。 
如 何 设 置 超出 了 本 书 的 范畴 ， 然 而 ， 我 们 会 使 用 一 个 NodeJS 应 用 来 讨论 如 何 设 
置 它们 。 


30.5 ”服务 端 处 理 SEO 的 选项 


有 许多 选项 可 以 使 我 们 的 站 点 更 好 地 支持 搜索 引擎 优化 ( Search Engine Optimization，SEO )。 
我 们 将 会 使 用 三 种 不 同 的 方式 演示 如 何 从 服务 器 端 交付 应 用 : 
口 使 用 Node/Express 中 间 件 ; 
口 使 用 Apache 重 写 URL ; 
口 使 用 Ngnix 代 理 URL。 
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30.5.1 使 用 Node/Express 中 间 件 


尽管 在 这 个 例子 中 我 们 使 用 的 是 NodeJS ， 但 这 一 实现 只 是 使 用 后 端 提供 静态 
HTML 的 一 种 方式 。 无 论 你 使 用 什么 样 的 后 端 ， 这 一 方案 都 是 可 行 的 。 


为 了 使 用 NodeJS 和 Express ( 基于 NodeJS 的 Web 应 用 程序 框架 ) 交付 静态 HTML, 我 们 必须 添 
加 一 些 用 来 在 查询 参数 中 查找 _escaped_fragment_ 的 中 间 件 : 
// 在 你 的 app .js 配置 中 共享 创意 


app.use(function(req, res, next) { 
var fragment = req.query._escaped_fragment_; 





if(!fragment) return next(); 


// 如 果 fragment 为 空 ， 则 服务 于 首页 
if(fragment === "" || fragment === "/") 
fragment = "/index.html"; 


// 如 果 fragment 不 是 以 '/' 开始 的 ， 则 将 '/ "前 置 插 入 fragment 
if(fragment .charAt(0) !== "/") 
fragment = '/' + fragment; 


// 如 果 fragment 不 是 以 ' .htm1l ' 结 尾 的 ， 则 将 它 插 入 fragment 中 
if(fragment.indexOf('.html') == -1) 
fragment += ".html"; 


// 服务 于 静态 html 快 照 

try { 
var file = __dirname + "/snapshots" + fragment; 
res.sendfile(file); 

} catch (err) { 
res.send(404); 

} 

] 


这 个 中 间 件 认为 我 们 的 快照 存放 在 叫做 “/snapshots” 的 顶级 目录 中 , 然后 会 基于 请 求 路 径 为 
文件 提供 服务 。 

例如 ， 当 请 求 / 时 ， 它 会 提供 index.html; 当 请 求 为 /about 时 ， 它 会 提供 snapshots 目 录 中 的 
about .html 。 











30.5.2 ”使 用 Apache 重 写 URL 

如 果 使 用 Apache 服 务 器 "交付 Angular 应 用 , 那么 可 以 添加 几 行 代码 到 配置 中 ,用 来 提供 快照 
服务 而 不 是 JavaScript 应 用 。 

可 以 使 用 mod_rewrite 模 块 来 检测 路 由 请 求 中 是 否 包 含 _escaped_fragment_ 查 询 参数 ,如果 
确实 包含 ， 它 会 重 写 请 求 ， 以 指向 /snapshots 目 录 中 的 静态 版 本 的 文件 。 

要 想 使 用 重 写 机 制 ， 需 要 启用 适当 的 模块 : 


$ a2enmod proxy 
$ a2enmod proxy_http 











QD http://httpd.apache.org/ 
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然后 需要 重新 载 人 Apache 配 置 : 
$ sudo /etc/init.d/apache2 reload 
可 以 在 站 点 的 虚拟 主机 配置 中 ， 或 者 位 于 服务 需 根 目录 的 .htaccess 文 件 中 设置 重 写 规 则 。 


RewriteEngine On 

Options +FollowSymLinks 

RewriteCond %{REQUEST_URI} ^/$ 

RewriteCond %{QUERY_STRING} ^_escaped_fragment_/?(.*)$ 
RewriteRule ^(.*)$ /snapshots/%1? [NC,L] 





30.5.3 ”使 用 Ngnix 代 理 URL 


如 果 使 用 Nginx" 为 Angular 应 用 提供 服务 ， 并 且 在 查询 字符 串 中 有 一 个 escaped_fragment_ 
参数 ， 那 么 也 可 以 添加 一 些 配置 以 便 提供 应 用 的 快照 。 


和 Apache 不 同 ，Nginx 无 需 启 用 什么 模块 ， 因 此 可 以 简单 地 更 新 配置 来 处 理 蔡 换文 件 路 径 的 


问题 。 


在 Nginx 配 置 文件 中 (比如 /etc/nginx/nginx.conf )， 需 要 确保 配置 信息 看 起 来 像 这 检 





























TK 





server { 
listen: 80; 
server_name example; 


if($args ~ "_escaped_fragment_=/?(.+)") { 
set $path $1; 
rewrite ^ /snapshots/$path last; 

} 


location / { 
root /web/example/current/; 
# Comment out if using hash urls 
if(!-e $request_filename) { 
rewrite ^(.*)$ /index.html break; 


} 
index index.html; 
} 
这 一 步 完成 之 后 就 可 以 重新 加 载 配置 信息 了 : 


sudo /etc/init.d/nginx reload 
30.6 ”获取 快照 


我 们 可 以 使 用 PhantomJS” 或 者 zombie.js* 等 工具 来 演 染 页 面 ， 以 便 提供 后 台 应 用 的 HTML 快 
照 。 当 Google 使 用 escaped_fragment_ 查 询 参 数 请 求 一 个 页 面 时 ， 我 们 就 可 以 简单 地 返回 并 泻 
染 这 个 页 面 。 

















GD http://wiki.nginx.org/Main 
© http://phantomjs.org/ 
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下 面 我 们 会 讨论 两 个 获取 快照 的 方法 : 使 用 Zombie.js 和 一 个 Grunt 工 具 。 这 里 不 会 涉及 使 用 
出 色 的 PhantomJS”"， 因 为 已 经 有 很 多 介绍 它 的 优秀 资源 了 。 


30.7 


使 用 Zombie.js 获取 HTML 快照 


要 使 用 Zombie.js”， 需 要 安装 zombie 这 个 npm 包 : 


$ npm install zombie 


现在 , 我 们 可 以 通过 使 用 zombie 来 使 用 NodeJS 保 存 文件 了 。 首 先 , 在 这 个 过 程 中 会 用 到 一 些 




















Var 


var 


把 

















辅助 方法 : 


Brower = require('zombie' ) ， 

url = require('url' )， 

fs = require('fs'), 

saveDir = _dirname + '/snapshots'; 


scriptTagRegExp = /<script\b[^]*(?:(?l<\/script>)<[^<]*)*¢\/script>/gi; 


stripScriptTags = function(html) { 
return html.replace(scriptTagRegexp, ''); 


browserOpts = { 
waitFor: 2000 ， 
loadCss: fase, 
TunScTripts: true 


saveSnapshot = function(uri, body) { 
var lastIdx - uri.lastIndexOf('#/'); 
if(lastIdx < 0) { 
// 如 果 使 用 html5mode 
path = 
url.parse(uri).pathname; 
} else { 
// 如 果 使 用 hashbang 模 式 
path = uri.substring(lastIdqdx + 1, uri.length); 


} 
if(path === '/') path = "/index.html"; 
if(path.indexOf('.html') == -1) 


path += ".html"; 


var filename = saveDir + path 
fs.open(filename, 'w', function(e, fd) { 
if(e) return; 
fs.write(fd, body); 
}) 





现在 , 我 们 需要 做 的 就 是 遍历 所 有 页 面 , 将 每 个 链接 从 相对 链接 转换 为 绝对 链接 ( 这 样 仆 虫 
才能 追踪 它们 )， 然 后 保存 生成 的 HTML。 





GD http:/phantomjs.org/ 
©® http://zombie.labnotes.org/ 
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上 面 的 浏览 器 配置 中 设置 了 一 个 相对 较 大 的 waitFor 。 这 个 选项 会 覆盖 我 们 所 关心 的 90% 的 
情况 。 如 果 想 在 获取 一 个 快照 时 使 用 更 精确 的 方式 ， 而 不 是 等 待 2? 秒 ， 则 需要 修改 Angular 应 用 来 
触发 一 个 事件 ， 然 后 在 Zombie 浏览 器 中 监听 这 个 事件 。 

由 于 我 们 和 希望 尽 可 能 自动 化 ， 而 不 想 污染 Angular 代 码 ， 因 此 宁愿 设置 一 个 相对 较 高 的 超时 
来 尝试 让 代码 保持 稳定 。 


crawlPage( ) 函数 : 














var crawlPage = function(idx, arr) { 
// location = window.1location 
if(idx < arr.length) { 
var uri = arr[idx]; 
var brower = new Brower(browerOpts); 
var promise = brower.visit(uri).then(function() { 
// 将 链接 转换 为 绝对 链接 ， 然 后 保存 它们 
// 如 果 需 要 并 且 还 没准 备 好 就 抓 取 它们 
var links = brower.queryAll('a'); 
links.forEach(function(link) { 
var href = link.getAttributel( 'href'); 
var absUrl = url.resolve(uri, href); 
link.setAttribute( 'href', absUr!]l); 
if(arr.indexOf(absUrl) < 0) { 
arr .push(absUr!1); 
} 
}); 


// 保存 
saveSnapshot(uri, brower.html()); 


// 在 下 次 选 代 中 再 次 调用 


crawlPage(idx+1, arr); 


现在 ， 可 以 在 我 们 的 页 面 中 调用 这 个 方法 了 : 


crawlPage(@, ["http://localhost:9000"|); 


30.8 使 用 grunt-html-snapshot 





我 们 推荐 使 用 Grunt 工 具 grunt-html-snapshot 来 生成 快照 。 因 为 我 们 使 用 Yeoman”， 所 以 
Grunt 已 经 存在 于 我 们 的 构建 过 程 之 中 ， 我 们 只 需 设置 这 个 任务 在 发 布 应 用 之 后 运行 即 可 。 


ran 


要 安装 grunt-htm1-snapshot ， 可 以 像 这 样 使 用 npm 安 装 它 : 





npm install grunt-html-snapshot --Save-dev 


如 果 不 使 用 Yeoman”， 就 需要 将 这 个 任务 作为 一 个 Grunt 任 务 包含 到 Gruntfilejs 中 : 





grunt.1loadNpmTasks('grunt-html-snapshot' ) ; 





GD http://yeoman.io/ 
© http:/yeoman io/ 
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设置 好 这 个 任务 之 后 , 可 以 对 我 们 的 站 点 做 一 些 配置 .为 了 设置 这 些 配置 , 需要 在 Gruntfile.js 
中 创建 如 下 新 配置 块 : 
htmlSnapshot: { 


debug: { 
options: {} 








}, 
prod: { 
options: {} 
} 
} 


现在 就 可 以 为 不 同 的 阶段 添加 首选 项 了 : 


htmlSnapshot: { 
debug: { 
options: { 
snapshotPath: 'snapshot/', 
sitePath: "http://127.0.0.1:9000/ ' ， 
msWaitForPages: 1000 ， 


urls: [ 
人 
" /about 
] 
} 
}, 
prod: { 
options: {} 
} 


} 
要 查看 所 有 可 用 的 配置 选项 列表 ， 可 参考 如 下 文档 : https://github.com/cburgdorf/grunt-html- 


Snapshot。 


30.9 Prerender.io 
此 外 , 我 们 还 可 以 使 用 开源 的 工具 ,比如 Prerender.io”, 它 包含 一 个 在 运行 时 演 染 站 点 的 Node 
服务 器 ， 和 一 个 与 后 端 通讯 在 运行 时 预 泻 染 HTML 的 Express 中 间 件 。 


本 质 上 ，prerender.io 接 受 一 个 URL ， 然 后 返回 泻 染 后 的 HTML (不 带 script 标 签 )。 实 质 上 ， 
它 会 从 应 用 中 像 这 样 调用 我 们 部 署 的 预 泻 染 服务 器 : 


GET http://our-prerenderserver.com/ http://localhost:9000/#/about 
这 个 GET 会 返回 #/about 页 面 演 染 后 的 内 容 。 


设置 一 个 prerender 集 群 实际 上 很 容易 做 到 。 此 外 ,我 们 还 会 展示 如 何 将 自己 的 预 泻 染 服务 需 
集成 到 Node 应 用 中 。Prerender.io 还 可 以 通过 一 个 叫做 prerender_rails 的 gem 支 持 Ruby on Rails ， 
但 是 在 这 里 我 们 不 会 介绍 如 何 设 置 它 。 


设置 自己 的 服务 器 来 运行 它 相当 容易 。 只 需 运 行 hpm install 来 安装 依赖 , 然后 通过 Foreman 
或 者 Node 运 行 以 下 命令 就 行 了 : 
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$ npm install 

$ node index.js 
# 或 者 使 用 foreman 
$ 


foreman start 
prerender 库 还 可 以 很 方便 地 运行 在 heroku 上 : 


$ git clone http://github.com/collectiveip/prerender .git 
$ heroku create 
$ git push heroku master 


这 里 我 们 将 泻 染 后 的 HTML 存 储 在 S3" 中 ,因此 推荐 你 使 用 内 置 的 $3 缓存 。 可 以 阅读 文档 "来 
了 解 如 何 设置 这 个 缓存 。 


在 服务 器 运行 之 后 ， 只 需要 将 这 个 抓 取 程序 集成 到 应 用 中 就 行 了 。 在 Express 中 ， 使 用 Node 
库 prerender-node 集 成 它 非常 容易 。 


为 了 安装 prerender-node ， 我 们 再 次 使 用 npm: 
$ npm install --save prerender-node 
装 好 这 个 库 之 后 ， 让 Express 应 用 使 用 这 个 中 间 件 即 可 : 


var prerender = 

require( 'prerender-node') 

.Set( 'prerenderServiceUr1l ' ， 
'http://our-prerenderserver .com/ ' ) ; 

app.use(prerender ) ; 


就 是 这 样 ! 最 后 这 个 片段 用 于 告诉 Express 应 用 ， 如 果 它 察觉 到 把 虫 请 求 (通过 定义 
_escaped_fragment_ 或 者 用 户 代理 字符 串 )， 就 应 该 在 合适 的 URL 上 为 prerender 服 务 创建 一 个 
GET 请 求 ， 然 后 获取 这 个 页 面 预演 染 好 的 HTML。 





























30.10 ”noscript) 方 法 








还 可 以 使 用 cnoscript> 标 签 来 泻 染 页 面 ， 而 无 需 使 用 后 端 服 务 器 。 不 幸 的 是 ， 对 于 所 有 页 
面 都 使 用 这 个 方法 是 非常 复杂 的 ， 因 为 需要 从 cnoscript> 外 部 将 页 面 的 所 有 元 素 复 制 到 这 个 标 
签 中 。 


这 样 做 会 很 麻烦 , 为 了 保持 两 部 分 同步 要 做 大 量 的 工作 ,因此 我 们 不 推荐 使 用 这 个 没有 构建 
工具 协助 的 方法 。 






































Q( S3 就 是 Amazon S3 ， 全 程 亚马逊 简易 储存 服务 ， 这 是 亚马逊 公司 提供 的 一 个 网 络 存储 服务 。 更 多 信息 参考 维基 百 
科 : Amazon S3 ( zh.wikipedia.org/wiki/Amazon _S3 )。 一 一 译 者 注 
© https://github.com/collectiveip/prerender#s3-html-cache 
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构建 AngularGChrome 应 用 











Chrome 浏览 器 是 Google 定 制 的 浏览 器 。 令 人 难以 置信 的 不 仅 是 它 的 速度 ， 它 更 领跑 在 Web 





开发 的 最 前 沿 ， 它 为 前 端 提供 了 在 线 和 离线 Web 体 验 。 





Chrome 应 用 就 是 铭 入 在 Web 浏 览 絮 中 运行 的 应 用 程序 , 但 是 它 旨 在 提供 原生 应 用 的 感觉 。 由 





于 它们 本 身 是 运行 在 Chrome 中 的 ， 因此 可 以 使 用 HTM 





L5、JavaScript 和 CSS3 来 编写 它们 ， 此 外 它 


们 还 能 够 访问 类 原生 的 功能 ， 但 它们 并 不 是 真正 的 Web 应 用 程序 。 


Chrome 应 用 可 以 使 用 Chrome 相 关 API 和 服务 ， 而 | 
Chrome 应 用 和 Web 应 用 之 间 一 个 更 有 趣 的 区 别 是 








日 还 能 为 用 户 提供 集成 桌面 应 用 的 体验 。 
，Chrome 应 用 是 在 本 地 加 载 的 ， 因 此 能 





立即 呈现 ,而 无 需 等 待 网 络 将 组 件 完全 下 载 下 来 。 这 一 特性 大 大 提升 了 运行 应 用 时 的 性 能 和 用 户 


体验 。 


31.1 了 解 Chrome 应 用 


让 我 们 先 来 深入 观察 一 下 Chrome 应 用 是 如 何 工 作 
每 个 Chrome 应 用 程序 都 有 三 个 核心 文件 。 

















31.1.1 manifest.json 


的 , 以 及 如 何 开 始 构 建 自己 的 Chrome 应 用 。 





这 个 manifestjson 文 件 用 于 描述 应 用 程序 的 元 数据 ， 比 如 名 称 、 描 述 、 版 本 以 及 如 何 启动 这 


个 应 用 程序 。 


31.1.2 ”背景 脚本 


31.1.3 ”视图 


个 背景 脚本 用 于 设置 应 用 程序 如 何 响应 系统 级 的 事件 ， 比 如 用 户 安装 你 的 应 用 或 者 启动 


大 多 数 的 Chrome 应 用 程序 都 有 一 个 视图 。 这 个 组 成 部 分 是 可 选 的 ， 但 是 它 通常 对 我 们 应 用 





程序 而 言 非常 有 用 。 








GD https://www.google.com/intl/en/chrome/browser/ 
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31.2 ”构建 你 的 Chrome 应 用 


这 一 节 将 使 用 Angular 创 建 一 个 高 级 Chrome 应 用 程序 。 创 建 一 个 由 Rainfall* 团 队 创建 的 非常 
出 色 的 Chrome Web 应 用 Currently 的 克隆 版 ， 如 图 31-1 所 示 。 

















ee 





图 31-1 Currently 


接 下 来 构建 一 个 叫做 Presently 的 克隆 版 。 


Presently 架 构 
在 构建 Presently 时 ,需要 考虑 应 用 程序 的 和 架构。 这样 做 可 以 在 开始 编写 代码 时 就 深刻 理解 该 
如 何 构 建 这 个 应 用 。 


和 Currently 一 样 ，Presently 也 是 一 个 “newtab” 应 用 ， 这 意味 着 它 会 在 每 次 打开 一 个 新 的 标 
签 页 时 启动 。 


Presently 有 两 个 主要 界面 : 

口 主 界面 

这 个 界面 显示 当前 时 间 和 天 气 。 它 还 会 在 天 气 旁 边 显示 一 些 天 气 图 标 。 

口 设置 界面 

这 个 界面 允许 用 户 改变 应 用 的 地 理 位 置 。 

为 了 支持 主 界面 ， 需 要 能 够 显示 正确 的 日 期 和 时 间 ， 以 及 从 远程 API 服 务 中 获取 天 气 数据 。 
为 了 文 持 设置 界面 ， 我 们 需要 整合 远程 API 服 务 ， 以 便 使 输入 框 可 以 自动 提示 可 能 的 城市 。 
最 后 ， 我 们 将 会 使 用 基本 的 本 地 存储 功能 (session 存储 ) 保存 整个 应 用 的 设置 。 






























































31.3 ”搭建 框架 
我 们 将 会 设置 一 个 像 这 样 的 文件 结构 来 构建 这 个 应 用 ， 如 图 31-2 所 示 。 





QD http://blog.rainfalldesign.com/ 
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DO presently 一 zsh 一 Solarized Dark xterm-256color — 71x21 





图 31-2 文件 结构 


这 里 把 CSS 文 件 存放 到 css/ 目 录 中 , 自 定义 字体 存放 在 fonts/ 中 , 而 JavaScript 文 件 存放 在 js/ 中 。 
还 会 设置 js/app.js 文 件 为 主 JavaScript 文 件 ， 以 及 根 目 录 中 的 tab.html 为 应 用 的 HTML 模 板 。 


有 一 些 非常 好 的 工具 可 以 帮助 我 们 创建 Chrome 应 用 扩展 的 引导 程序 ， 比 如 
Yeoman' 。 
在 启动 Chrome 扩 展 之 前 ， 还 需要 先 获取 一 些 依赖 。 


这 里 将 会 从 angularjs.org” 下 载 最 新 版 的 angular.min.js”， 以 及 angular-route.min.js”"， 然 后 将 它 
们 保存 到 js/vendor/ 目 录 中 。 


最 后 ， 这 里 还 会 使 用 Twitter 的 Bootstrap 3 框架 为 我 们 应 用 提供 样式 ， 因 此 还 需要 从 
getbootstrap.com” 下 载 bootstrap.min.css 文 件 ， 然 后 将 它 保 存 到 css/ 中 。 








在 产品 中 ， 有 多 个 开发 人 员 一 起 工作 时 ,使 用 Bower 这 类 工具 通常 能 够 更 有 效 
地 管理 依赖 。 由 于 这 里 要 构建 一 个 newtab 应 用 ， 为 了 快速 启动 而 使 应 用 程序 保 
持 轻 量 级 是 很 重要 的 。 


31.4 manifest.json Ei 


在 我 们 编写 的 每 个 Chrome 应 用 中 ， 都 需要 设置 一 个 mani fest. json 文件 。 这 个 manifest 文 件 
用 于 告诉 Chrome 应 用 程序 该 应 该 如 何 运 行 ， 应 该 使 用 什么 文件 以 及 有 什么 权限 ， 等 等 。 


在 这 里 ， 这 个 manifest.json 文 件 需要 将 我 们 的 应 用 描述 为 一 个 newtab 应 用 ， 还 要 描述 Chrome 
应 用 需要 的 content_security_policy ( 这 是 一 个 描述 应 用 程序 能 做 什么 不 能 做 什么 的 策略 选 
项 ) 和 背景 脚本 。 











GD http:/yeoman io/ 

© http://angularjs.org/ 

© http://code.angularjs.org/1.2.16/angular.min.js 

(@ http://code.angularjs.org/1.2.16/angular-route.min.js 
®) http://getbootstrap.com/ 

© http://bower.io/ 
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"manifest_version": 2 
"name": "Presently", 
"description": "A currently clone", 
"version": "0.1", 
"permissions": ["http://api.wunderground.com/api/"], 
"background": { 

"scripts": ["js/vendor/angular.min.js"] 


1/ 


}; 
"content_security_policy": "script-src 'self'; object-src 'self'", 
"chrome_url_overrides": { 

"newtab": "tab.html" 


} 


manifestjson 中 的 键 相 对 而 言 比较 简单 ， 并 且 它 允许 设置 名 称 、manifest 版 本 和 应 用 版 本 ， 等 
等 。 为 了 让 Chrome 将 应 用 作为 newtab 应 用 启动 ， 在 这 里 设置 这 个 应 用 履 盖 所 有 新 标签 页 。 





31.5 tab.html 





这 个 应 用 程序 的 主 HTML 文 件 就 是 tab.html 文 件 。 当 我 们 在 Chrome 打 开 一 个 新 标签 页 时 就 会 
加 载 这 个 文件 。 


我 们 将 在 这 个 tab.html 文 件 内 建立 这 个 基本 的 Angular 应 用 : 





<¢ldoctype html> 
<html data-ng-app="myApp" data-ng-csp=""> 
<head> 
<meta charset="UTF-8"> 
<title>Presently¢</title> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<link rel="stylesheet" href="css/main.css"> 
</head> 
<body> 
<div class="container"> 
</div> 
<Script src="./js/vendor/angular.min.js">¢/script> 
<Script src="./js/vendor/angular-route.min.js"></script> 
<Script src="./js/app.js">»</script> 
</body> 
</html> 


这 是 Angular 应 用 程序 非常 基本 的 结构 ， 看 起 来 几乎 与 任何 Angular 应 用 相同 ， 除 了 
data-ng-csp="" 之 外 。 


这 个 ngCsp 会 启用 内 容 安 全 策略 ( Content Security Policy，CSP ) 来 支持 我 们 的 应 用 。 由 于 
Chrome 应 用 会 阻止 浏览 器 使 用 eval 或 者 function(string) 生 成 的 函数 ， 而 Angular 要 使 用 
function(string) 生 成 的 函数 来 加 速 ，ngCsp 可 以 让 Angular 能 够 计算 所 有 表达 式 的 值 。 


然而 ， 这 个 兼容 模式 出 于 考虑 性 能 的 成 本 ,在 执行 操作 时 比较 慢 , 但 是 在 这 个 过 程 中 它 不 会 
抛 出 任何 安全 隐患 。 


CSP 还 禁止 使 用 JavaScript3| 入 内 联 样 式 表 规则 ， 因 此 你 需要 手动 引入 angular-csp.css。 
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可 以 在 http://code.angularjs.org/snapshot/angular-csp.css 找到 angular-csp.css 文 件 。 


[=} 


最 后 ， 还 必须 把 ngcsp 放 在 Angular 应 用 的 根 元 素 旁 边 ; 





<htmlng-appng-cspy> 


在 没有 ngs-csp 指 令 的 情况 下 ，Chrome 应 用 将 不 会 运行 ; 它 会 抛 出 一 个 安全 隐 
患 。 如 果 看 到 安全 隐患 被 抛 出 ， 请 检查 应 用 的 根 元 素 以 确保 有 这 个 指令 。 


31.6 在 Chrome 中 加 载 应 用 
对 于 正在 开发 中 的 应 用 也 可 以 将 它 加 载 到 Chrome 以 便 在 浏览 器 中 了 解 进展 情况 。 要 在 
Chrome 中 加 载 应 用 ， 首 先 应 该 导航 到 URL: chrome://extensions/。 


导航 到 这 里 之 后 , 可 以 点 击 “ 加 载 正 在 开发 的 扩展 程序 ...” 按 钮 , 然后 找到 项 目的 根 目录 (这 
个 目录 中 包含 在 上 面 定义 的 manifest.json 文 件 )， 如 图 31-3 所 示 。 











Extensions 


The new Apps Developer Tools me 
been added to the application list. 


Load unpacked extension... 


图 31-3” ”加载 未 打包 的 扩展 


这 个 应 用 程序 加 载 到 Chrome 浏 览 需 之 后 ， 我 们 可 以 打开 一 个 新 标签 页 ， 并 且 应 该 看 到 带 有 
一 个 错误 信息 的 空 应 用 (不 要 担心 ， 很 快 就 会 修复 它 )， 如 图 31-4 所 示 





@ee 








图 31-4 在 浏览 器 中 加 载 未 打包 的 扩展 


无 论 什 么 时 候 ， 只 要 更 新 或 者 修改 了 manifestjson 文 件 ， 都 需要 在 chrome:/ 
extensions 中 点 击 “重新 载 入 ”按钮 ， 重 新 在 幕后 连接 我 们 的 Chrome 应 用 。 





QD http://code.angularjs.org/snapshot/angular-csp.css 
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31.7 ” 主 模 块 


接 下 来 我 们 将 在 js/appjs 文 件 中 构建 这 个 完整 的 Angular 应 用 程序 。 对 于 生产 版 本 的 应 用 ， 你 
可 能 希望 将 这 些 功 能 分 割 到 多 个 JavaScript 文 件 中 , 然后 使 用 Grunt 这 类 工具 压缩 和 合并 这 些 文件 。 


这 个 应 用 叫做 myApp， 因 此 要 创建 一 个 同名 的 Angular 模 块 : 

















angular .module( 'myApp', []) 
在 这 一 步 之 后 ， 这 个 应 用 运行 在 浏览 右 中 就 不 会 有 任何 问题 


31.8 构建 主页 


接 下 来 开始 构建 应 用 的 主页 部 分 。 在 这 部 分 , 将 致力 于 整合 能 够 让 应 用 程序 运行 起 来 的 组 件 。 
在 下 个 部 分 ， 将 会 建立 一 个 多 路 由 的 应 用 程序 。 








构建 时 钟 
Presently 的 主要 特征 是 位 于 应 用 程序 顶端 并 每 秒 都 更 新 的 大 时 钟 。 在 Angular 中 , 建立 这 个 时 
钟 相当 简单 。 


从 构建 负责 管理 主屏 幕 的 MainController 开 始 。 在 这 个 MainController 控 制 器 内 ， 只 需 设 
置 一 个 每 秒 运转 一 次 ， 同 时 更 新 一 个 局 部 作用 域 变 量 的 延 时 。 

















angular .module( 'myApp', []) 
.controller('MainController', function($scope, $timeout) { 
// 构建 date 对 象 
$scope.date = {}; 


// 更 新 函数 

var updateTime = function() { 
$scope.date.raw = new Date(); 
$timeout(updateTime, 1000); 

}3 


// 启动 更 新 函数 
updateTime( ); 
}); 
MainController 内 的 updateTime( ) 函数 每 秒 都 会 运行 ， 以 便 更 新 gscope.date.raw 时 间 戳 ， 
同时 更 新 视图 。 
为 了 看 到 加 载 到 Chrome 应 用 视图 中 的 所 有 信息 ， 还 需要 给 文档 绑 定 这 个 数据 。 可 以 使 用 标 
准 的 {{ }} 模 板 语法 来 设置 这 个 绑 定 : 





<div class="container"> 
<div ng-controller="MainController"> 
{{ date.raw }} 
</div> 
</div> 


当 返 回 到 浏览 器 中 并 刷新 它 时 ， 应 该 会 看 到 一 个 未 格式 化 的 日 期 对 象 显 示 在 视图 中 。 
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目前 ， 浏 览 器 中 的 这 个 日 期 还 非常 丑陋 。 我 们 可 以 利用 Angular 内 置 的 过 滤器 以 更 优雅 的 方 
式 来 格式 化 这 个 日 期 。 

证 我 们 在 主屏 幕 上 以 类 似 于 普通 日 期 格式 的 方式 格式 化 这 个 日 期 。 更 新 视图 时 ,需要 将 这 个 
日 期 移 到 它 谍 套 的 div 中 ， 然 后 添加 显示 日 期 的 格式 : 








<div class="container"> 
<div ng-controller="MainController"> 
<div id="datetime"> 
<h1i>{{ date.raw | date:'hh mm ss' }}</h1> 
</div> 
</div> 
/div> 


然后 借鉴 Bootstrap 的 帮助 使 用 一 点 CSS， 这 个 日 期 就 会 以 更 人 性 化 的 格式 显示 在 屏幕 上 ， 如 
图 31-$ 所 示 。 








09 41 16 











图 31-5 ”第 一 个 界面 
这 里 我 们 还 使 用 了 一 点 点 CSS 规 则 让 日 期 和 时 间 居 中 显示 在 屏幕 上 ,同时 放大 了 字体 大 小 以 





让 它 突 出 显示 在 屏幕 上 。 


#datetime { 


text-align: center; Ei 
} 


#datetime hi { 
font-size: 6.1enm; 


} 


你 可 以 在 视图 中 添加 男 一 个 日 期 , 以 人 性 化 的 方式 来 显示 当前 日 期 。 只 要 再 添加 一 个 格式 化 
的 日 期 就 可 以 了 : 





<{—— .. ， ——> 
<div id="datetime"> 
<h1i>{{ date.raw | date: 'hh mm ss' }}<¢/hi1> 
<h2>{{ date.raw | date: 'EEEE, MMMM yyyy' }}</h2> 
«</div> 
<{—— ... ——> 


下 面 的 CSS 用 于 给 #datatime h2 简 单 地 增 大 ch2; 标 签 的 字体 大 小 ， 效 果 如 图 31-6 所 示 。 


图 灵 社 区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 





408 第 31 章 ”构建 Angular Chrome 应 用 





#datetime h2 { 
font-size: 1.Qem; 


} 


09 44 07 


Monday, October 2013 
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31.9 使 用 Wundergroud 的 天 气 API 


图 31-6 ”完整 的 日 期 





这 个 应 用 还 需要 使 用 外 部 资源 来 获取 我 们 感 兴趣 的 当前 位 置 的 天 气 信息 。 在 这 个 应 用 程序 


中 ， 我 们 将 使 用 Wunderground" 的 API。 





为 了 使 用 Wunderground 的 API， 需 要 获取 一 个 访问 API 的 密 钥 。 
要 获取 这 个 访问 API 的 密 钥 ， 首 先 需要 注册 。 到 Wunderground 的 API 页 面 http:/wwwwunder 


ground. com/weather/api/ 点 击 "Sign Up for freel" 即 可 。 


在 随后 的 页 面 上 填 好 相关 信息 之 后 ， 可 以 点 击 提交 ， 





直到 到 达 显 示 API 密 钥 的 详情 页 面 。 


设置 好 之 后 ， 找 出 Wunderground 的 API 密 钥 ， 然 后 保存 它 。 我 们 很 快 就 会 用 到 它 。 





构建 Angular 服 务 


我 们 不 会 将 逻辑 放 到 控制 器 中 来 提取 当前 天 气 ， 因 为 它 效 率 低 下 〈 当 你 导航 另 一 个 页 面 时 ， 
控制 器 就 告吹 了 , 因为 每 当 控制 咒 接 和 人 后 都 需要 重新 调用 这 些 API ), 同时 把 实现 细节 混入 业务 逻 


























辑 细 市 中 也 是 不 好 的 设计 。 











并 且 这 也 是 避 开 控制 器 隐藏 业务 逻辑 的 适当 位 置 。 


我 们 需要 在 应 用 启动 时 配置 应 用 ， 因 此 需要 使 用 .provider( ) 方 法 创建 这 个 服务 。 这 是 创建 


可 以 注入 到 .config() 函 数 中 服务 的 唯一 方法 。 


相反 , 这 里 应 该 使 用 服务 。 在 应 用 程序 生命 周期 持续 的 时 间 里 , 服务 是 跨 控 





Ny 





十 
上 


剖 铝 持久 存在 的 ， 








为 了 构建 这 个 服务 ， 我 们 将 使 用 .provider() AP 方法 ， 它 接受 一 个 服务 名 以 及 一 个 定义 实 


际 程序 的 函数 。 





(WY http://www.wunderground.com/ 
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angular.module('myApp'，[]) 
.provider('Weather', function() { 


}) 
在 这 个 方法 内 ， 需要 定义 一 个 $get( ) 函数 ,该 函数 返回 可 用 于 这 个 服务 中 的 方法 。 要 配置 这 
个 服务 ， 还 需要 一 个 可 以 在 配置 中 设置 API 密 钥 的 方法 。 而 这 些 方法 都 应 该 在 $get( ) 函数 的 作用 
域外 部 。 


.provider('Weather', function() { 
Var apiKey = "" 





this.setApiKey = function(key) { 
if(key) this.apiKey = key; 


} 
this.$get = function($http) { 
return { 
// 服务 对 象 
} 


} 
}) 


使 用 这 段 小 巧 的 代码 , 现在, 我 们 可 以 将 Weather 服 务 注入 到 .config( ) 函数 中 ,然后 使 用 你 
的 Wundereround API 密 钥 来 配置 这 个 服务 。 


当 Angular 磁 到 使 用 .provider() API 方 法 创建 的 提供 者 时 ， 它 会 创建 一 个 可 注入 对 象 
[Name]Provider。 这 是 一 个 将 会 注 人 到 配置 函数 中 的 对 象 : 























// .provider('Weather', function() { 
a 
// }) 
.config(function(WeatherProvider) { 
WeatherProvider .setApiKey('YOUR_API_KEY' ) ; 
}) 
// .controller('MainController', function($scope, $timeout) { 


L/S 


Wu reroll API 要 求 我 们 将 这 个 API 密 铀 传递 给 请 求 的 URL。 为 了 将 API 密 铀 传递 给 每 
请 求 ， 还 需要 创建 一 个 生成 这 个 URL 的 函数 。 


var apikey = ""; EE 


LY 
this.getUrl = function(type, ext) { 
return "http://api.wunderground.com/api/" + 
this.apiKey + "/" + type + "/q/" + ext + '.json'; 
上 


现在 ， 我 们 可 以 创建 API 来 调用 Weather 服 务 ， 帮 我们 从 Wunderground 的 API 中 获取 最 新 的 预 
测 数据 。 


我 们 将 会 创建 自己 的 、 可 以 用 来 在 视图 中 解析 数据 的 promise， 因 为 我 们 只 希望 从 API 调 用 中 
返回 相关 的 结 


this.$get = function($q, $http) { 
var self = this; 
return { 
getWeatherForecast: function(city) { 
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var d = $q.defer(); 
$nttp({ 
method: 'GET', 
url: self.getUrl("forecast", city), 
cache: true 
}).success(function(data) { 
// Wunderground API 返 回 


// 识 套 在 forecast .simpleforcast 属 性 内 的 forecasts 对 象 


d.resolve(data. forcast.simpleforcast); 
}).error(function(err) { 

d.reject(err); 
}); 


return d.promise( ); 


}; 
} 





现在 ， 我 们 可 以 将 这 个 Weather 服 务 注 入 到 控制 器 中 ， 然 后 在 控制 器 中 调用 getweather 





Forecase() 方 法 以 及 响应 promise， 而 不 是 处 理 API 的 复杂 度 。 





回 到 MainController : 现在 可 以 注入 Weather 服 务 ， 然 后 在 作用 域 上 设置 其 结果 : 


.Controller('MainController '， 
function($scope, $timeout, Weather) { 
WL a 
$scope.weather = {}; 
// 暂时 使 用 硬 编 码 的 San_Francisco 
Weather .getWeatherForecast("CA/San_Francisco") 
.then(function(data) { 
$scope.weather. forcast = data; 
}); 
/ss 


要 查看 视图 中 调用 这 个 API 的 结果 , 需要 更 新 tab.html。 出 于 调试 的 目的 , 这 里 先 在 一 个 <pre> 





标签 内 使 用 json 过 滤器 ， 效 果 如 图 31-7 所 示 。 





<div idq="forecas 七 "> 


<pre>{{ weather .forecast | json }}¢/pre> 
</div> 


10 33 43 


Monday, October 2013 





{ 
": "1383026400"， 
etty": "11:08 PM PDT on October 28, 2813", 


图 31-7 调用 天 气 API 进 行 调试 





这 里 可 以 看 到 视图 已 经 使 用 最 新 的 天 气 数据 更 新 了 ， 现 在 我 们 来 创建 一 个 更 优雅 的 视图 。 
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视图 本 身 会 遍历 forecast . forecastday 集 合 。 对 于 每 个 元 素 ， 我 们 会 创建 一 个 视图 来 显示 
Wunderground API 为 我 们 提供 的 天 气 图 标 , 以 及 一 个 便于 阅读 的 日 期 和 最 高 温度 , 如 图 31-8 所 示 。 


<div id="forecast"> 
<ul class="row list-unstyled"> 
《<li ng-repeat="day in weather.forcast.forcastday" class="col-md-3"> 
<div ng-class="{{ today: $index == 0 }}"> 
<img src="{{ day.icon }}" ng-src="{{ day.icon_url }}" /> 
<h3>{{ day.high. fahrenheit }}</h3> 
<h4 ng-if="$index == @">Now</h4> 
<h4 ng-if="$index != 6@">{{ day.date.weekday }}</h4> 
</div> 
/i 
/Ul 
</div> 
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Monday, October 2013 


66 66 68 70 


Tuesday Wednesday Thursday 


图 31-8 干净 的 HTML 天 气 视图 








下 面 是 设置 给 视图 的 样式 : 


#forcast ul li { 
font-size: 4.5em; 
text-align: center; 

} 

#forecast ul li h3 { 
font-size: 1.4enm; 





} 
#forecast ul li .today h3 { 
font-size: 1.8em; 


} 


31.10 ”设置 珊 面 
目前 ， 这 个 应 用 还 只 有 一 个 视图 , 它 带 有 一 个 人 硬 编码 的 城市 ， 用 于 为 每 个 浏览 者 提取 天 气 数 
据 。 但 是 这 个 设置 为 所 有 人 提供 的 都 是 旧金山 的 数据 ， 因 此 它 还 不 能 为 其 他 地 方 的 人 效力 。 
为 了 让 用 户 能 够 使 用 Presently 自 定义 体验 ， 还 需要 添加 男 一 个 界面 : 设置 界面 。 
要 引进 第 二 个 界面 (以 及 多 个 界面 )， 需 要 将 ngRoute 模 块 作为 依赖 添加 给 我 们 的 应 用 模块 。 


angular.module('myApp'，['ngRoute ']) 
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现在 ， 可 以 定义 单独 的 视图 和 路 由 ， 然 后 把 主 界面 视图 从 tab.html 主 视图 中 提取 出 来 。 
在 定义 路 由 期 间 ， 注 意 这 里 需要 两 个 路 由 : 分 别 对 应 应 用 程序 的 两 个 不 同 界面 。 





// angular.modulel(...) 


J 
.config(function($routeProvider) { 
$routeProvider 
.when('/', { 
templateUrl: "templates/home .html ' ， 
controller: 'MainController' 
.when('/settings', { 
templateUrl: 'templates/settings.html', 
controller: 'SettingsController' 
}) 
.otherwise( {redirectTo: '/'}); 
}) 


可 以 将 tab.html 中 div.container 之 间 的 所 有 HTML 移 人 templates/home.html 文 件 中 ， 人 然后 使 
用 cdiv ng-view> </div; 来 蔡 换 它 。 








<div class="container"> 
<div ng-view> </div> 
</div> 


刷新 页 面 时 ， 可 以 看 到 似乎 没有 什么 变化 ， 但 是 HTML 是 从 templates/home.html 模 板 中 加 载 
的 ， 而 不 是 直接 租 入 在 tab.html 内 。 


目前 , 我 们 还 没有 切换 两 个 界面 的 方式 。 可 以 添加 一 些 允许 用 户 导 航 到 不 同 页 面 的 基于 页 脚 
导航 的 元 素 。 在 这 里 ， 我 们 仅 在 页 面 底部 添加 两 个 链接 ， 导 航 到 不 同 的 页 面 ， 就 像 下 面 这 样 : 


<div id="actionbar "> 
<U1 class="list-inline"> 
<li><a class="glyphicon glyphicon-home" href="#/"></a> </1i> 
<li><a class="glyphicon glyphicon-cog" href="#/settings"></a> </1i> 
</ul> 
</div> 


为 了 将 它们 添加 到 界面 的 右 下 角 ， 必 须 对 它们 应 用 一 些 绝对 定位 的 CSS: 











#actionbar { 
position: absolute; 
bottom: 0.5em; 
right: 1.Qem; 


#actionbar a { 
font-size: 2.2rem; 
color: #000; 


} 


现在 ,如果 你 通过 点 击 齿轮 按钮 导航 到 设置 页 面 ,你 会 看 到 这 里 没有 呈现 任何 信息 。 这 需要 
定义 SettingController ， 以 便 我 们 可 以 操作 视图 ， 同 时 供用 户 使 用 。 


pS A 

.controller('SettingsController', function($scope) { 
// 这 里 是 控制 器 定义 

}); 
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设置 界面 本 身 是 一 个 功能 单一 的 表单 ， 负 责 让 用 户 切 换 到 它们 感 兴趣 的 城市 。HTML 类 似 于 
这 抉 代码 ( 其 中 有 一 些 我 们 还 没 实现 的 功能 


<h2>Settings</h2> 
<form ng-submit="save( )"> 
<input type="text" ng-model="user.location" placeholder="Enter a location" /> 


“<input class="btn btn-primary" type="submit" value="Save" /> 
</ form> 





31.11 ”实现 用 户 服务 
出 于 同样 的 原因 ， 我 们 隐藏 了 Wunderground API 的 复杂 度 ， 而 且 我 们 还 希望 隐藏 用 户 API。 
这 样 就 可 以 使 用 本 地 存储 ， 以 及 在 应 用 的 任意 部 分 与 用 户 设置 控制 器 通信 。 


UserService 本 身 非 常 简单 ， 它 不 需要 在 应 用 中 配置 。 在 不 使 用 本 地 存储 的 情况 下 ， 
UserService 其 实 很 简单 : 











.factory( 'UserService'，function() { 
var defaults = { 
location: "autoip' 
} 
var service = { 
user: defaults 


}; 


return service; 


和 类 











个 服务 在 应 用 程序 生命 周期 内 都 会 持 有 user 对 象 。 也 就 是 说 ， 只 要 浏览 器 窗口 开 着 ,用 户 
对 应 的 设置 都 会 保持 不 变 ; 然而 ， 如 果 用 户 在 Chrome 中 打开 一 个 新 标签 页 ， 这 些 设置 就 
会 丢失 ， 这 是 不 理想 的 。 
可 以 通过 使 用 Chrome 的 sessionStorage 功 能 来 跨 应 用 保留 用 户 设 置 。 幸好, 这 个 API 非 常 
简单 。 
只 需 添 加 两 个 函数 给 UserService: 








口 save 





口 restore 


即使 使 用 这 些 功 能 ，UserService 的 代码 也 没有 增长 太 多 : 


WA ns 
.factory('UserService', function() { 
var defaults = { 
location: "autoip' 


}; 


var service = { 
user: {}, 
save: function() { 
sessionStorage.presenty = angular.toJson(service.user); 


和 


restore: function() { 
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// 从 sessionStorage 中 拉 取 配置 
service.user = angular.fromJson(sessionStorage.presenty) || defaults 
return service.user; 


} 
上 后 
// 立即 调用 它 ， 从 session storage 中 回复 配置 
// 因此 这 里 的 用 户 数 据 是 立即 可 用 的 
service.restore( ) ; 
Teturn service; 


}) 
J 


我 们 还 可 以 跨 Chrome 应 用 注入 这 个 UserService ， 然 后 使 用 同样 的 用 户 数据 。 回 到 
SettingsController ， 现 在 可 以 使 用 这 个 新 服务 设置 user 对 象 来 定义 设置 信息 : 
.Controller('SettingsController'，function($scipe，UserService) { 


$scope.user = UserService.user 


的 有 


如 果 刷 新 浏览 器 ,会 看 到 有 一 个 为 用 户 设置 的 默认 autoip ， 这 是 我 们 在 UserService 中 定义 
设置 的 默认 值 。 


我 们 需要 一 种 将 用 户 数据 保存 在 会 话 存储 中 的 方法 , 这 样 就 可 以 跨 应 用 使 用 这 些 数据 了 。 在 
templates/settings.html 中 ， 定 义 了 一 个 带 有 ng- ss tt 因此 ， 当 用 户 提 交 
这 个 表单 时 ，save( ) 函数 就 会 被 调用 。 


在 SettingsController 内 ,我们 需要 实现 这 个 save( ) 函数 , 它 会 调用 UserService 上 的 save 
方法 ， 将 用 户 数据 保存 到 他 们 的 sessionStorage 中 。 


.Controller('SettingsController'，function($scope，UserService) { 
$scope.user = UserService.user; 
$scope.save = function() { 
UserService.save() 








} 
})3 


还 有 一 个 绑 定 到 user .1ocation 的 唯一 输入 字段 ， 如 果 用 户 改 变 它 的 值 并 按 下 保存 ， 用 户 的 
sessionStorage 就 会 更 新 ， 如 图 31-9 所 示 。 





eoe 


Settings 
CNSan_Francisco | save | 
vHWeb SQL Key Value 
vilindexedD8 presently mocatiom "CA/San_Francisco” 
T 国 Local Storage 
chrome-extension:/. 
Session Storage 
ies 
pkgolgbkihdnpjm. 
Wirarion Carhe 
a © x 将 





图 31-9 sessionStorage 
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通过 在 HomeController 中 使 用 UserService ,现在 我 们 可 以 移 除 人 硬 编 码 的 值 
“CA/San Francisco”， 然 后 使 用 新 的 UserService 对 象 返 回 的 地 址 替换 它 。 


J sn 
.controller('MainController', function($scope, $timeout, Weather, UserService) { 
AR 
$scope.user = UserService.user; 
Weather .getWeatherForecast($scope.user.1location).then(function(data) { 
$scope.weather. forecast = data; 
I 
/is 











}) 
正如 我 们 可 以 看 到 的 那样 ， 如 果 切 换 到 设置 视图 ， 然 后 输入 “NY/New_York”， 可 以 看 到 天 气 
会 根据 我 们 在 设置 页 面 中 设置 的 地 址 发 生 改 变 ， 如 图 31-10 所 示 。 





eee /可 


11 37 05 


Monday, October 2013 





图 31-10 纽约 天 气 


31.12 ”城市 自动 填充 /自动 完成 


每 次 都 需要 输入 一 个 符合 Wunderground API 风 格 的 城市 很 不 方便 ( 经度/ 维度 、 城 市 和 州 、 
家 代码 ， 等 等 )。 幸 好 ，Wunderground API 还 为 我 们 提供 了 一 个 autocomplete API”。 


无 需要 求 用 户 知道 具体 城市 的 格式 ， 我 们 可 以 提供 一 个 列表 ， 供 用 户 选择 。 











为 了 保持 简单 性 和 灵活 性 ， 这 里 只 会 创建 一 个 未 加 工 的 基于 JavaScript 的 自动 完 
成 ， 而 不 是 使 用 插件 ， 比 如 typeahead.js 或 者 jQuery 插件 库 。 


要 做 到 这 一 点 ， 我 们 要 在 cinput> 元 素 上 创建 一 个 指令 ， 用 来 插入 一 个 带 建议 地 址 的 cul> 
元 素 。 


.directive('autoFill', function($timeout) { 
return { 
restrict: 'EA', 
scope: { 
autoFill: '&', 





GD http:/www.wunderground.com/weather/api/d/docs?d=autocomplete-api 
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ngModel: '=" 
}:; 
compile: function(tEle, tAttrs) { 
// 编 译 函 数 
return function(scope，ele，attrs，ctrl) { 
// 链 接 函 数 
} 
} 


} 
} 


因为 这 里 会 创建 一 个 新 元 素 ， 因 此 需要 使 用 compile 子 数 而 不 只 是 1ink 也 数 和 模板 ， 因 为 
<ul) 元 素 不 能 向 套 在 一 个 cinput> 元 素 中 。 


这 里 不 会 深入 介绍 compile 函 数 的 工作 原理 ， 只 会 创建 一 个 新 元 素 ， 然 后 为 它 设 置 绑 定 : 


AR 

compile: function(tEle, tAttrs) { 
var tplEl = angular.element('<div class="typeahead">' + 
'¢input type="text" autocomplete="off" />' + 
'<ul id="autolist" ng-show="reslist">' + 








<li ng-repeat="res in reslist" ' + 
'>{{res.name}}</1i>' + 

'</ul>' + 

‘</div>'); 


var input = tplEl.find('input'); 
input.attr('type', tAttrs.type); 
input.attr('ng-model', tAttrs.ngModel ) ; 
tEle.replaceWith(tplE]1); 


return function(scope, ele, attrs, ctrl) { 


YL a 


在 链接 函数 内 , 我 们 需要 给 keyup 事 件 绑 定 一 个 函数 , 同时 还 要 检查 在 输入 字段 中 至 少 有 最 少 
数量 的 字符 。 只 要 发 现 有 最 少数 量 的 字符 ， 就 运行 通过 使 用 指令 设置 的 函数 , 来 提取 自动 建议 值 。 





























Autocomplete API 
证 我 们 来 看 看 如 何 调用 这 个 指令 : 通过 传递 一 个 函数 调用 给 auto-fil1 指 令 ， 然 后 将 位 置 值 


绑 定 给 user. location。 








<input type="text" 
ng-model="user .location" 
auto-fill="fetchCities" 
autocomplete="off" 
placeholder="Location" /> 


在 weather 服 务 中 ， 我 们 会 创建 另 一 个 函数 明确 地 调用 autocomplete API， 并 解析 一 个 带 
与 查询 词汇 对 应 的 完整 建议 列表 的 promise。 


有 


马 











getWeatherForecast: function(city) { 
A 

} 

getCityDetails: function(query) { 
var d = $q.defer(); 
$http({ 
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method: 'GET', 
url: "http://autocomplete.wunderground.com/aq?query=" + query 
}).success(function(data) { 
d.resolve(data.RESULTS); 
}).error(function(err) { 
d.reject(err); 
上 
return d.promise; 


} 


回 到 settingsController 中 ， 我 们 可 以 引用 这 个 函数 来 检索 建议 值 列表 。 记 住 ， 需 要 在 控 
制 器 中 注入 这 个 Weather 服 务 来 引用 它 。 


.controller('SettingsController', 
function($scope, UserService, Weather) { 
a 
$scope. fetchCities = Weather.getCityDetails; 
}); 


在 这 个 指令 中 ， 可 以 调用 这 个 函数 ,我们 想 在 这 个 函数 引用 的 动作 上 触发 修改 。 


J 
tEle.replaceWith(tplE1l); 
return function(scope, ele, attrs, ctr1) { 
var minKeyCount = attrs.minKeyCount || 3, 
timer, 
input = ele.find('input'); 


input.bind('keyup', function(e) { 
val = ele.val(); 
if(val.length < minKeyCount) { 
if(timer) $timeout.cancel(timer); 
scope.reslist = null; 
return; 
} else { 
if(timer) $timeout.cancel(timer); 
timer = $timeout(function() { 
scope.autoFill()(val).then(function(data) { 
if(data && data.length > 0) { 
scope.reslist = data; 
scope.ngModel = data[0] .zmw; 








所: 


// 失去 焦点 时 隐藏 reslist 
input.bind('blur'，function(e) { 
scope.reslist = null; 
scope.$digest(); 
I 
} 


这 里 用 了 一 个 延 时 ,以 便 只 在 用 户 输入 完成 后 调用 该 函数 。 使 用 延 时 只 是 一 种 阻止 函数 被 重 
复 调 用 的 简单 方式 ， 而 我 们 真正 感 兴趣 的 只 是 第 一 次 调用 suggestion API， 如 图 31-11 所 示 。 





图 灵 社 区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 





418 第 31 章 构建 Angular Chrome 应 用 





Settings 

New York 

|New York City, Now York 

New York Mils, New York 

New York Mils, Minnesota 

New York 

New York JFK, New York 

New York Mas Municipal, Minnesota 
|New York Skyports INC., New York 











BSB, A © <wwfam>v TF MIE Warnin gs Debug 4 将 


图 31-11 在 浏览 器 中 自动 填充 





31.13 ”添加 时 区 支持 


最 后 , 我 们 还 希望 能 够 根据 用 户 在 他 的 设置 中 的 选择 来 更 新 时 钟 和 显示 新 地 址 。 要 更 新 时 钟 
包含 时 区 支持 很 容易 : 实际 上 我 们 已 经 通过 自动 完成 API 实 现 了 最 难 的 部 分 。 


首先 ， 必 须 给 指令 再 添加 一 个 用 作 时 区 的 timezone 属 性 : 





<input type="text" ng-model="user.1location" timezone="user .timezone" auto-fill="fetchCities" 
autocomplete="off" placeholder="Location" /> 


接 下 来 ， 需 要 在 指令 的 compile 函 数 中 将 timezone 属 性 添加 给 生成 的 cinput> 字 段 : 


A ea 
input.attr('type', tAttrs.type); 

input.attr('ng-model'，tAttrs .ngModel ) ; 
input.attr('timezone', tAttrs.timezone); 
tEle.replaceWith(tplE!l); 





6 





yA 

最 后 一 项 要 点 ， 在 处 理 自动 完成 的 链接 函数 中 ， 还 要 在 保存 用 户 位 置 值 时 保存 用 户 的 时 区 : 
po 

scope.reslist = data; 

scope.ngModel = data[0] .zmw; 


scope.timezone = data[0] .tz; 


/7 


回 到 浏览 器 中 ， 当 用 户 输入 城市 时 ， 会 看 到 我 们 在 新 的 城市 值 劳 边 保 存 了 时 区 信息 ， 如 图 
31-12 所 示 。 
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Settings 


Phoenix 


Key 一 一 Value 





一 一 一 ee 
v Ejweb SQL 
vijindexedDB 
Y 国 Local storage 

国 chrome-extension:/ 
T 国 Session Storage 
[= © x 党 


图 31-12 ”时 区 支持 
至 此 ， 我 们 还 需要 更 新 MainController 内 的 时 间 和 日 期 ， 把 新 增 的 时 区 考虑 进去 。 


以 前 , 匹配 时 区 名 对 应 的 格林 尼 治 时 间 (GMT ) 偏 移 量 是 一 项 艰巨 的 任务 。Mozilla 和 Chrome 
团 队 使 用 新 的 timeZone 参 数 实 现 了 toLocaleString 方 法 ， 让 我 们 就 能 够 根据 时 区 信息 重新 映射 
日 期 。 由 于 这 里 编写 的 是 一 个 Chrome 应 用 ， 因 此 可 以 在 应 用 中 大 胆 地 使 用 这 个 函数 。 


回 到 MainController 中 ， 我 们 还 可 以 基于 之 前 保存 的 时 区 信息 创建 一 个 新 日 期 : 


function($scope, $timeout, Weather, UserService) { 

















.controller('MainController', 
$scope.date = {}; 


var updateTime = function() { 
$scope.date.tz = new Date(new Date().toLocaleString("en-US", {timeZone: $scope.user. 


timezone})); 
$timeout(updateTime, 1000); 


} 


现在 , 我 们 不 再 在 视图 中 使 用 $scope .date.raw 了 ,而 是 使 用 $scope.date.tz。 时间 会 伴随 
时 区 的 修改 而 变化 ， 如 图 31-13 和 图 31-14 所 示 。 


03 06 31 


Tuesday, October 2013 

















59 63 64 57.: 


i i 
v HindexedDB presently {location"*60290.1.99999","timezone™“America/Chicago’} 
v 国 Local storage 

夸 chrome-extension:/ 
了 国 Session Storage 





四 ,并 Q © x 


图 31-13 ”芝加哥 时 区 
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@ee /了 
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72 72 72 72.: 


ments RU Network Sources Timeline Profiles A 


-es a Key Value 
vIndexedDe presently location"”96718.1.99999","timezone"."Pacific/Honolulu"} 
T 国 Local Storage 
转 chrome-extension:/ 
国 Session storage 
hrome-extensio 
.3 a © x 





图 31-14 ”夏威夷 时 区 
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优化 Angular 应 用 











显然 ，Angular 在 开发 期 间 就 做 了 很 大 的 优化 ， 但 是 在 性 能 方面 它 是 如 何 定位 的 呢 ? 为 了 让 
它 尽 可 能 快 ， 我 们 还 能 做 些 什么 呢 ? 


对 于 大 多 数 Web 应 用 程序 而 言 ，Angular 的 速度 已 经 足够 快 了 ， 因 此 无 需 特 意 优 化 它 的 性 能 。 
当 你 的 应 用 程序 变 慢 或 者 表现 不 佳 时 ， 才 需要 动手 优化 Angular 应 用 。 


32.1 优化 什么 


为 了 了 解 应 该 集中 优化 应 用 的 哪些 部 分 ， 需 要 理解 Angular 在 幕后 发 生 了 什么 事情 。 对 于 任 
何 应 用 程序 ， 我 们 都 应 该 从 问题 的 起 因 开始 。 











32.2 ”优化 $digest 循环 


查找 性 能 问题 , 最 明显 的 地 方 是 从 $digest 循 环 开 始 。 简 而 言 之 , Angular 通 过 运行 一 个 监控 列 
表 来 跟踪 实时 数据 绑 定 。 页 面 上 每 一 个 可 能 改变 的 实时 数据 都 有 一 个 监控 函数 。 





第 24 章 详细 讨论 了 $watch 列 表 和 $digest 循 环 。 
每 个 监控 列表 都 可 能 导致 $digest 循 环 花 更 多 的 时 间 完 成 演 染 ， 因 为 Angular 需 要 跟踪 值 ， 同 
时 检查 它 在 每 个 循环 中 是 否 发 生变 化 。 
限制 不 必要 的 监控 数量 会 获得 最 大 的 性 能 提升 。 此 外 ,双向 数据 比较 应 尽量 简单 ,这样 会 
来 更 多 的 性 能 提升 ， 因 为 这 样 浏览 器 可 以 快速 地 检查 它们 。 
在 你 的 应 用 中 ， 你 应 该 留心 双向 数据 绑 定 的 数量 ， 对 于 页 面 上 每 个 $dqigest 循 环 中 的 数据 绑 
定 不 应 该 超过 2000 个 。 


有 了 时， 其 至 不 需要 在 应 用 程序 中 运行 完整 的 $digest 循 环 。 想 象 一 下 ， 有 个 一 秒 钟 查询 服务 
器 多 次 的 轮 询 。 如 果 我 们 收 到 一 个 websocket 事 件 , 触发 一 个 完整 的 qigest 循 环 来 处 理 每 条 消息 ， 
这 将 会 得 到 相当 慢 的 应 用 程序 。 


推荐 使 用 websocket ， 因 为 它们 在 生产 中 更 加 友好 并 且 不 容易 出 错 。 





圭 

















app. factory('poller', function($rootScope, $http) { 
var pollForEvent = function(timeout) { 
$http.get('/events') 
.success(function(data) { 
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var events = data.events ; 
for(var i = 0)1 i «< events.length; i++) { 
var event = events[il];， 
if(servie.handlers[event]) 
for(handler in service.handlers[event]) 
$rootScope.$apply(function() { 
handler .apply(event); 
}); 
} 
// 设置 下 一 个 廷 时 
setTimeout(pollForEvent, timeout); 
}); 
}; 
// 每 半 秒 轮 询 一 次 
setTimeout(function() { pollForEvent(500); }); 
var service = { 
handlers: {}, 
on: function(evt, callback) { 
if(!service.handlers[evt]) 
service.handlers[evt] = []; 


service.handlers[evt] .push(callback); 


} 
} 
return service; 
所 
这 段 代码 的 主要 问题 在 于 ， 每 个 独立 事件 被 触发 时 就 会 结束 运行 $rootScope.$apply() 方 
法 ， 这 会 导致 每 秒 产 生 很 多 $digest 循 环 。 











限制 每 秒 钟 $qigest 循 环 的 数量 是 提升 应 用 性 能 的 一 个 很 好 方式 .你 可 以 使 用 事件 节 流 的 方 
式 设 置 一 个 每 秒 触发 事件 的 最 大 次 数 。 


// 节 流 函数 
var throttle = function(fn, atMost, ctx) { 
var ctx = ctx || this; 
var atMost = atMost || 250; // 毫秒 
var last, defer, result; 
return function() { 
var now = new Date(), 
args = arguments ; 
if (last && now < last + atMost) { 
// 延迟 执行 
clearTimeout(defer); 
defer = setTimeout(function() { 
last = now; 
fn.apply(ctx, args); 
}, atMost); 
} else { 
result = fn.apply(ctx, args); 














} 


return result; 


} 
在 每 个 atMost 生 命 周期 内 ， 这 个 比较 丑陋 的 throttle() 函 数 最 多 只 会 触发 函数 一 次 。 





全 





© 
志 
| 
才 
全 
昌 
区 


复 执 行 的 操作 的 策略 。 旨 在 限制 无 间断 地 重复 执行 函数 或 者 事件 。 一 一 译 者 注 
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| 这 个 代码 在 Underscore.js" 库 中 有 一 个 可 用 于 生产 并 经 过 良好 测试 的 更 优 版 本 。 


为 了 使 用 throttle 函 数 设 置 $digest 循 环 亨 流 ， 你 可 以 在 事件 循环 中 调用 它 : 


A 
for(var i = 0; i < events.length; i++) { 
var event = events[i]; 
if(service.handlers[event]) 
for(handler in service.handlers[event]) 
throttle(function() { 
$rootScope.$apply(function() { 
handler .apply(event); 


}); 
}，500 ) ; 


32.3 ”优化 ng-repeat 


Angular 中 最 大 的 延迟 资源 之 一 便 是 ng-repeat 指 令 。 对 于 每 个 ng-repeat 所 处 的 独立 元 素 ， 
列表 中 每 个 条 目 都 至 少 有 一 个 数据 绑 定 ， 这 甚至 还 没有 包括 创建 在 列表 元 素 内 的 任何 其 他 绑 定 。 


让 我 们 来 看 看 下 面 这 个 使 用 ng-repeat 生 成 的 重复 列表 的 性 能 : 


<U1》> 
《<li ng-repeat="email in emails"> 
<a ng-href="#/from/{{ email.sender }}"> 
{{ email.sender }} 
</a> 
<a ng-href="#/email/{{ email.id }}"> 
{{ email.subject }} 
</a> 
/1 
</Uul> 
对 于 这 个 列表 中 每 个 独立 的 email， 最 少 都 有 一 个 由 ngRepeat 指 令 生 成 的 监控 函数 (这 个 监 
控 函 数 用 于 监控 列表 的 变化 )。 由 于 Angular 会 为 每 个 独立 的 ng 指令 创建 一 个 gwatch， 上 面 的 列表 
中 每 个 emai 1 都 会 有 4+1 个 监控 吉 。 对 于 一 个 有 100 个 email 的 列表 ， 上 面 的 用 法 就 会 创建 500 个 监 
控 器 ， 而 上 面 这 个 例子 甚至 都 不 是 一 个 复杂 的 完整 页 面 。 


对 于 这 个 相对 简短 的 列表 , 很 明显 它 会 大 大 降低 一 个 大 型 应 用 程序 的 性 能 。 这 里 有 一 些 相对 
简单 的 方式 可 以 用 来 加 速 你 的 应 用 程序 。 


32.4 优化 $dqigest 调用 


在 改变 一 个 变量 时 通常 可 以 确定 什么 时 候 会 运行 $dqisgest 循 环 ， 以 及 运行 $digest 循 环 会 影 
响 哪 些 作 用 域 。 在 这 种 情况 下 ， 你 无 需 在 $rootScope 上 使 用 $scope.$apply() (这 会 导致 每 个 子 
作用 域 $scope 跑 进 $dqigest 循 环 中 ) 调用 完整 的 $dqigest 循环 。 作 为 替代 可 以 直接 调用 
$scope.$qigest()。 





















































GD http://underscorejs.org/ 
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调用 $scope.$digest() 只 会 在 调用 了 $digest() 及 其 子 节点 的 具体 作用 域 上 运行 qigest 
循环 。 


32.5 ”优化 $watech 函数 


由 于 $watch 列 表 中 的 表达 式 会 在 每 个 $digest 循 环 中 执行 ,保持 较 少 的 功能 很 重要 。 更 小 以 
及 更 专注 的 $watch 表 达 式 ,会 让 应 用 程序 的 性 能 更 好 。 

在 $watch( ) 函数 中 避免 深度 比较 复杂 的 逻辑 以 及 使 用 少量 的 循环 ,会 有 助 于 加 速 应 用 程序 。 

例如 ， 可 以 设置 一 个 监控 函数 来 监控 一 个 对 象 。 假 没有 一 个 Account 对象: 











$scope.account = { 
active: true, 
UserId: 123, 
balance: 10080 // 美 分 
} 


假定 想 要 监控 任意 时 刻 的 账户 余额 变化 ， 然 后 在 余额 为 0 时 设置 账户 为 未 激活 。 可 以 设置 一 
个 $watch 函 数 来 监控 这 个 account 对 象 ， 每 当 余额 对 象 变化 时 更 新 账户 信息 : 











$scope.$watch('user', function(newAccount) { 
if(newAccount.balance <= 0) { 
$scope.account .active = false 


} 
}, true); 


$watch( ) 函数 中 的 第 三 个 参数 用 于 告诉 Angular， 是 否 使 用 深度 比较 来 监控 这 个 对 象 ， 它 会 
使 用 angular .equals( ) 子 数 检查 每 个 属性 。 


这 个 选择 将 会 导致 粮 粒 的 性 能 。 不 仅 Angular 会 创建 一 个 对 象 副 本 ， 在 存储 它 时 需要 遍历 每 
个 属性 来 检查 其 中 是 否 有 任何 变化 。 


这 里 有 一 个 构建 $watch 函 数 的 技巧 : 使 用 它们 跟踪 明显 会 影响 视图 的 变量 。 对 于 不 会 影响 视 
的 任何 事物 都 不 需要 使 用 $watch 函 数 。 


有 时 候 移 除 监控 融 对 我 们 来 说 是 有 意义 的 , 特别 是 在 数据 是 静态 的 , 并 且 只 想 在 第 一 时 间 将 
它 暴 露 给 视图 的 时 候 ， 因 为 这 时 $watch 函数 就 变 得 无 关 紧 要 了 。 


从 视图 中 移 除 自 定义 的 监控 器 也 很 容易 : 让 $watch 函 数 自 身 返 回 一 个 为 我 们 移 除 $watch 的 
函数 即 可 。 


例如 ， 比 方 说 有 一 个 自 定 义 的 指令 等 待 解析 变量 name : 




































































<div data-my-directive name="customerName"> </div> 
由 于 这 个 customerName 一 旦 设置 后 就 不 可 改变 ,你 可 以 通过 移 除 已 经 设置 的 $watch 函 数 来 
优化 这 个 指令 : 


.directive( 'myDirective', function($q) { 
return { 
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link: function(scope, ele, attrs, ctr1l) { 
var unwatch = $scope.$watch(attrs.name, function(n, o) { 
if(n != o) { 
// 使 用 解析 后 的 name 做 些 什么 事 
// 然后 移 除 watch 
unWatch( ) ; 


}); 

可 以 通过 移 除 应 用 程序 中 所 有 不 必要 的 监控 器 来 提升 性 能 。 当 你 尝试 从 应 用 程序 中 移 除 每 个 
监控 函数 时 ， 这 个 过 程 可 能 特别 麻烦 ， 特 别 是 当 你 尝试 移 除 由 Angular 设 置 的 默认 监控 兢 时 。 

还 可 以 编写 自 定 义 的 指令 来 维护 监控 器 ， 而 不 是 使 用 Angular 提 供 的 内 置 指令 。 科 好， 你 不 
必 自 己 编写 这 些 指令 ， 因 为 有 一 个 叫做 bindonce 的 库 已 经 为 我 们 编写 好 了 。 













































































32.5.1 bindonce 


bindonce 是 一 个 可 以 用 于 你 的 应 用 中 的 即 持 即 用 模块 ， 它 只 保留 了 监控 一 次 的 指令 ; 它 还 为 
我 们 提供 了 传递 异步 数据 的 能 力 。 

这 个 库 提 供 了 新 的 指令 ， 用 于 不 需要 实时 更 新 的 DOM 元 素 。 这 些 指令 会 留意 值 的 填充 和 验 
证 。 一 旦 数据 可 用 ， 它 就 泻 染 它 以 及 子 元 素 的 内 容 ， 然 后 立即 移 除 监控 需 。 


使 用 bindonce 指 令 时 创建 的 独立 的 临时 监控 器 会 在 数据 变 得 可 用 时 被 移 除 。 如 果 数 据 在 作用 
域 中 已 经 可 用 了 ， 它 不 会 创建 监控 器 ， 而 是 泻 染 子 元 素 。 
回想 一 下 上 一 个 例子 。 我 们 将 使 用 bindonce 的 非 永久 监控 器 (zero permanent watcher ) 创建 
同样 的 例子 : 
<U1》> 
《<li bindonce="email" ng-repeat="email in emails"> 
<a bo-href-i="#/from/{{ email.sender }}" bo-text="email.sender"> </a> 
<a bo-href-i="#/email/{{ email.id }}" bo-text="email.subject"></a> 


/11> 
</uly 


要 使 用 bindonce ， 首 先 要 获取 其 源码 。 可 以 直接 从 Github 上 的 项 目 页 面 (https:/github.comy/ 
pasvaz/bindonce ) 得 到 ， 或 者 像 这 样 使 用 Bower 安 装 它 : 















































bower install angular-bindonce 

拿 到 源码 之 后 ， 需 要 在 主 视图 中 引用 它 : 

<script src="scripts/vendor/bindonce.js"> </script> 
最 后 ， 还 需要 将 它 作为 一 个 依赖 设置 给 应 用 程序 模块 : 
angular.module('myApp'，['pasvaz.bindonce '] ); 


现在 ， 当 我 们 处 理 静 态 数 据 时 ,我 可 以 保证 ， 在 bo-* 标 签 的 帮助 下 ,我 们 无 需 使 用 不 必要 的 
监控 需 了 。 
bindonce 库 为 我 们 提供 了 很 多 指令 。 正 如 上 面 看 到 的 ， 我 们 使 用 了 两 个 自 定义 指令 。 
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使 用 po-* 标 签 时 ， 需 要 确保 包含 了 bindonce 指 令 。 所 有 子 bo-* 指 令 都 会 等 待 这 
个 指令 解析 数据 。 


1. bo-if="condition" 

这 个 指令 等 同 于 调用 ng-if， 但 是 它 没有 使 用 额外 的 监控 器 。 

2. bo-show="condition" /bo-hide="condition" 

这 个 指令 等 同 于 调用 ng-show 或 者 ng-hide， 但 是 没有 使 用 任何 额外 的 监控 器 。 
3. bo-text="text" 

这 个 指令 会 对 text 求 值 ， 然 后 将 它 放 到 元 素 内 。 类 似 于 ng-bind。 

4. bo-href="url" /bo-href-i="ur1" 


使 用 bo-href 时 不 允许 使 用 需要 插值 的 "ur1" ， 而 bo-href-i 人 允许 URL 中 包含 插值 。 下 面 这 两 
个 调用 功能 是 等 价 的 : 

// bo-href 不 允许 任何 插值 

<a bo-href="'/users/' + User.id">vV/ay> 


// bo-href-i 允许 插值 


<a bo-href-i="'/users/{{ User.id }»v</a> 









































5. bo-src="ur1l" /bo-src-i="url1" 
bo-src 不 允许 在 URE 内 插值 ， 而 bo-src-i 人 允许 。 下 面 这 两 个 调用 功能 是 等 价 


// bo-src 不 允许 任何 播 值 
<img bo-src="'/users/' + User.gravatar" /> 
// bo-src-i 允 许 质 值 


<img bo-src="/users/{{ User.gravatar }}" /> 








6. bo-alt="text" 
类 似 于 bo-text ， 这 个 指令 会 在 DOM 元 素 内 演 染 文本 ， 然 后 将 文本 设置 给 元 素 的 alt 属 性 。 
7. bo-title="title" 

bo-title 指 令 会 在 DOM 元 素 内 演 染 文本 ， 然 后 将 文本 设置 给 元 素 的 title 属 











性 。 





三 
dol 


8. bo-id="id" 

这 个 指令 演 染 "id" ， 然 后 将 这 个 iq 设 置 给 元 素 的 id 属性 。 
9. bo-style="style" 

这 个 指令 会 使 用 和 ng-style 一 样 的 语法 将 样式 作为 表达 式 泻 染 ， 而 不 会 使 用 监控 器 。 
10. bo-value="value" 

这 个 指令 泻 染 给 定 的 值 ， 然 后 将 它 设 置 给 元 素 的 value 属 性 。 

11. bo-attr bo-attr-foo="hello" 

这 个 指令 会 在 DOM 元 素 中 将 文本 " foo" 作 为 自 定义 属性 泻 染 。 

使 用 ng-repeat 优 化 静态 数据 页 面 ，Bindonce 是 一 个 很 不 错 的 选择 














a 
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32.5.2 ”$watch 函 数 的 自动 优化 


最 新 版 的 Angular 在 找到 恒定 值 时 〈 比如， 表达 式 解析 为 布尔 值 或 者 静态 的 整数 ) 会 自动 移 
除 $watch 函数 。 


// 下 面 这 些 监控 器 会 被 自动 移 除 

// 因为 Angular 的 $watches 会 检测 到 这 些 值 都 是 不 会 改变 的 值 
$scope.$watch('true', function() {}); 
$scope.$watch('2 + 2', function() {}); 





32.6 ”优化 过 滤器 


位 于 视图 中 的 每 个 过 滤 右 将 至 少 被 调用 2 次 ， 这 是 过 滤 融 的 本 质 。 越 是 保持 这 些 函数 轻 量 以 
及 对 它们 进行 优化 ， 应 用 程序 就 会 更 快 。 





32.6.1 不 变 的 数据 


出 于 这 个 原因 ,分 析 在 哪里 以 及 为 什么 在 视图 中 使 用 过 滤器 通常 是 个 好 注意 。 一 个 好 的 经 验 
法 则 : 任何 可 以 从 视图 中 移 除 的 过 滤器 都 需要 改造 一 下 。 


也 就 是 说 ， 当 检索 到 数据 时 ,可 以 转换 这 个 模型 ， 而 不 是 在 视图 中 使 用 currency 过 滤 需 。 那 
样 ， 我 们 就 不 必 在 视图 中 运行 两 次 过 滤 顺 。 


也 就 是 说 不 要 在 视图 中 使 用 过 滤器 ， 就 像 这 样 : 


<!-- 使 用 过 滤器 一 -> 


<div>{{ receipt.total_cost | currency }}¢/div> 
可 以 使 用 $filter 服 务 在 你 的 控制 器 (或 者 服务 ) 中 转换 这 个 receipt .total_cost。 


.controller('ReceiptController', function($scope, $filter) { 
$scope.receipt_total_sum = 12345; 
$scope.receipt.total_cost = $filter('currency')($scope.receipt .total_sum); 


}); 





32.6.2 ”过 滤 后 的 数据 


我 们 还 有 其 他 的 过 滤器 ， 比 如 实时 搜索 过 滤器 ， 它 会 使 用 ng-repeat 以 及 通过 使 用 用 于 分 类 
的 orderBy 过 滤器 限定 集合 中 的 重复 数据 。 在 这 些 情况 下 ， 数 据 并 不 会 改变 ， 只 是 设置 数据 如 何 
显示 在 屏幕 上 。 


我 们 可 以 缓存 分 类 过 的 、 筛 选 过 的 结果 ， 只 在 必要 时 执行 排序 ， 而 不 是 在 每 个 $qigest 循 环 
中 调用 这 些 过 滤器 。 这 个 忆 缓 存 。 








OO-: 记忆 缓存 "是 一 种 用 于 加 速 应 用 程序 的 优化 技巧 ， 用 于 这 些 情 况 : 先前 已 经 调用 
过 函数 ， 对 于 给 定 输入 ， 函 数 结果 没有 像 预期 那样 发 生 改 变 。 








G Memoization 是 一 种 加 速 程序 的 优化 技术 , 为 了 防止 重复 计算 , 它 会 保留 程序 的 调用 结果 。 更 多 信息 参考 维基 百科 : 


Memoization ( en.wikipedia.org/wiki/Memoization )。 一 一 译 者 注 
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为 了 使 用 记忆 缓存 奉 代 过 滤器 ， 需 要 实现 自 定 义 的 memoize( ) 函数 或 者 使 用 第 三 方 库 提供 的 
函数 ， 比 如 Underscore.js" 或 者 Lo-Dasm 库 ,这些 库 都 包含 了 自 定义 的 实现 。 由 于 这 个 函数 本 身 很 
小 ,在 这 里 我 们 引入 了 Lo-Dash 库 中 的 这 个 基本 函数 定义 : 








function memoize(fn, resolver) { 
var memoized = { 
var cache = memoized.cache, 
key = resolver ? resolver.apply(this, arguments) : +new Date() + '' + arguments[0]; 
return hasOwnProperty.call(cache, key) ? cache[key] : (cache[key] = fn.apply(this, 
arguments ) ) ; 
} 
memoized.cache = {}; 
return memoized; 


} 


本 质 上 , 这 个 函数 接受 两 个 参数 : 一 个 要 缓存 的 函数 和 一 个 可 选 的 resolver 函 数 ,， 它 用 来 为 
存储 结果 确定 缓存 键 。 这 个 函数 返回 一 个 备 忘 函数 。 


使 用 它 时 ,可 以 将 这 个 备 忘 函数 设置 为 作用 域 对 象 的 函数 调用 ,这 样 就 可 以 在 视图 中 调用 
它 了 。 


angular .module( 'myApp', []) 
.Controller('MainController', function($scope $filter) { 
$scope.getNames = memoize(function() { 
return $filter('orderBy')( 
$scope.names, 
$scope .orderBy, 
$scope.reverselist 


入 








}, 
function() { 
// Tesolver 函 数 返回 一 个 表示 缓存 键 的 字符 事 
return $scope.orderBy + '-' + $scope.reverseList; 


和 
上 六 


oo 第 一 次 它 会 调用 orderBy 过 滤器 。 第 二 次 调用 过 滤 需 时 ， 它 
并 不 会 运行 ， 因 为 此 时 缓存 中 已 经 包含 了 排序 后 的 键 。 


有 时 ， 你 可 能 希望 手动 清除 缓存 〈 比如 ， 添 加 或 者 移 除 条 目 更 新 数据 )。 由 于 绥 存 就 在 函数 
对 象 上 ( 作为 函数 的 属性 存在 )， 因 此 可 以 通过 设置 它 的 值 为 一 个 新 的 { } 对 象 简单 地 清除 它 。 




















$scope.getNames.cache = {}; 


32.7 ”页 面 加 载 优 化 技巧 


我 们 还 可 以 优化 在 客户 端 浏览 器 中 泻 染 页 面 时 需要 花 的 时 间 。 当 然 ， 这 里 并 没有 银 弹 "可 以 
确定 客户 端 加 载 页 面 的 最 佳 机 制 ， 正 如 大 部 分 问题 都 取决 于 服务 端的 组 成 部 分 、 位 置 和 主机 。 








GD http://underscorejs.org/ 

© http://lodash.cony 

@ 没有 银 弹 ， 软 件 工 程 中 对 软件 工程 问题 的 一 种 描述 。 更 多 信息 参考 维基 百科 : 没有 银 弹 ( http:t.cn/zWIKVjT )。 
一 一 译 者 注 
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32.7.1 压缩 

压缩 代码 是 优化 可 感知 的 页 面 加 载 时 间 最 容易 的 方法 。 

压缩 就 是 从 源 代码 中 移 除 所 有 不 必要 的 字符 , 将 变量 减 小 到 我 们 可 以 获取 的 最 小 尺寸 , 撤销 
注释 和 块 分 割 符 等 操作 的 一 个 过 程 。 

这 就 减少 了 文件 进行 网 络 传输 所 花 的 时 间 ， 因 为 最 终 的 文件 大 小 减 小 了 。 


我 们 可 以 压缩 HTML 、JavaScript、CSS， 甚 至 是 图 片 。 压 缩 并 不 会 牺牲 应 用 程序 的 功能 ， 反 
而 用 户 会 得 到 更 好 的 体验 。 


有 许多 免费 的 工具 可 用 于 处 理 压 缩 。 推 荐 使 用 ugli fy ， 可 以 通过 Grunt 使 用 它 。 关 于 Grunt 的 
详细 信息 ， 请 参考 34.3 节 。 





























32.7.2 利用 $templateCache 


在 生产 中 部 署 应 用 时 ， 我 们 都 希望 应 用 的 加 载 尽 可 能 快 ， 以 及 尽 可 能 做 出 响应 。 使 用 XHR 
加 载 模板 可 能 会 导致 Web 应 用 缓慢 或 者 有 卡 顿 的 感觉 。 可 以 通过 将 模板 包装 为 JavaScript 文 件 ， 然 
后 连同 应 用 程序 的 其 他 部 分 一 起 传输 的 方式 伪造 模板 缓存 加 载 ， 而 不 是 通过 XHR 提 取 模 板 。 

关于 如 何 有 效 地 包装 模板 的 详细 信息 ， 请 参考 $templateCache 工具 : grunt-angular- 
templates。 
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第 33 章 
调试 AngularJS 











当 我 们 构建 大 型 Angular 应 用 时 ， 经 常会 遇 到 一 些 很 难 发 现 和 解决 的 问题 ， 从 而 让 人 抓 狂 。 


33.1 从 DOM 中 调试 


尽管 这 既 不 是 必要 步 又 ， 也 不 一 定 要 从 这 个 步骤 开始 ， 但 我 们 可 以 访问 附加 给 任意 DOM 元 
素 的 Angular 属 性 。 我 们 可 以 使 用 这 些 属性 来 突 探 数据 是 如 何 流 入 应 用 程序 的 。 



































OO 永远 都 不 应 该 依靠 还 在 应 用 程序 生命 周期 内 的 DOM 元 素来 获取 该 元 素 的 属性 
这 项 技术 一 般 都 是 出 于 调试 的 目的 才 使 用 的 。 


为 了 从 DOM 中 获取 这 些 属 性 , 我 们 需要 找到 感 兴趣 的 元 素 。 如 果 有 完整 的 jQuery 库 可 用 , 可 
以 使 用 jQuery 的 选择 器 语法 : $("selector")。 


然而 ， 我 们 并 不 需要 依赖 于 jQuery 从 DOM 中 获取 目标 元 素 。 相 反 ， 我 们 可 以 使 用 
document .querySelector( ) 方 法 。 





OO 注意 , document .querySelector( 览 器 中 都 可 用 ， 它 一 般 适 合 
选择 不 复杂 的 元 素 ， 而 Sizzle”( jQuery 也 使 用 这 个 库 ) 或 者 jQuery 支持 更 复杂 
的 选择 。 


可 以 通过 选择 ngApp 指 令 所 在 的 元 素来 从 DOM 中 检索 $rootScope ， 然 后 将 它 包装 为 一 个 
Angular 元 素 (使 用 angular .element() 方 法 )。 
对 于 一 个 Angular 元 素 , 可 以 从 DOM 内 部 调用 不 同 的 方法 来 检查 我 们 的 Angular 应 用 。 这 样 做 ， 


需要 从 DOM 中 选择 元 素 。 在 只 使 用 JavaScript 和 Angular 的 情况 下 ( 这 里 的 意思 是 除了 使 用 Angular， 
不 使 用 其 他 任何 库 )， 可 以 以 下 面 这 种 方式 实现 : 








var rootEle = document .querySelector("htm1" ) ; 
var ele = angular.element(rootEle); 


可 以 使 用 这 个 元 素 提取 应 用 程序 的 不 同 部 分 。 














GD http://sizzlejs.com/ 
© http://jquery.com/ 
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33.1.1 scope() 


33.2 ”调试 器 
在 元 素 上 使 用 scope( ) 方 法 时 ， 可 以 从 该 元 素 (或 者 父 元 素 ) 上 提取 它 的 $scope 对 象 : 


var scope = ele.scopel(); 


431 











遍历 它 的 作用 域 链 。 





使 用 元 素 的 作用 域 时 , 可 以 检查 任意 作用 域 属 怕 





E， 比 如 在 控制 器 中 设置 给 作用 域 对 象 的 自 定 
33.1.2 controller() 





义 变量 。 还 可 以 宕 探 元 素 ， 查 看 它 的 $id 、$parent 对 象 、 设 置 给 它 的 $$watchers， 其 至 是 手动 


通过 使 用 controller() 方 法 可 以 提取 当前 元 素 (或 者 父 元 素 ) 的 控制 器 : 
var ctrl = ele.controller(); 
// 或 者 
var ctrl = ele.controller('ngModel'); 
33.1.3 injector() 


入 融 。 








通过 在 被 选中 的 元 素 上 使 用 injector() 方 法 可 以 提取 当前 元 素 (或 者 包含 它 的 元 素 ) 的 注 


var injector = ele.injector(); 
然后 可 以 使 用 这 个 注入 器 在 应 用 内 实例 化 任意 Angular 对 象 ， 比 如 服务 、 其 他 控制 器 或 者 任 
意 其 他 对 象 。 
33.1.4 inheritedData() 
ele.inheritedData( ) ; 








通过 在 元 素 上 使 用 inheritedData() 方 法 可 以 提取 与 该 元 素 $scope 对 象 关联 的 数据 。 


找到 一 个 特定 的 值 或 者 直到 找到 最 项 层 的 作用 域 。 





TI pe 


这 个 inheritedData() 方 法 就 是 Angular 在 作用 域 链 中 查找 数据 的 方式 ， 它 会 遍历 DOM 直 到 
见 症 
的 方式 提取 被 Angular 化 的 元 素 。 


查找 你 所 感 兴趣 的 元 素 ， 只 需 在 浏 


如 果 你 使 用 Chrome， 可 以 使 用 开发 者 工具 提供 的 一 些 快捷 方式 。 比 如 要 简单 地 
33.2 


中 右 击 ， 然 后 选择 审查 元 素 。 这 个 元 素 
本 身 存 储 在 一 个 叫做 $9 的 变量 中 ， 然 后 你 可 以 通过 调用 angular .element($0) 
调试 器 





debugger 语 句 会 导致 浏览 器 冻结 代码 执行 





Google 的 Chrome "浏览 器 有 自己 的 调试 器 工具 ， 它 可 以 在 我 们 的 代码 中 创建 断 点 。 使 用 
， 这 就 允许 我 们 检查 真实 应 用 程序 内 正在 
QD https:/www.google.com/chrome 


运行 


的 代码 ， 
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以 及 接近 在 浏览 需 内 执行 的 代码 。 
要 使 用 debugger ， 只 需 将 它 添加 到 应 用 程序 代码 的 上 下 文 内 即 可 : 





angular .module( 'myApp') 
.factory('SessionService', function($q, $http) { 
var service = { 
user_id: null, 
getCurrentUser: function() { 
debugger; // 在 这 个 函数 内 设置 debugger 
return service.user_id; 


return service; 


}); 
在 这 个 服务 内 ， 我 们 将 会 调用 debugger 方 法 有 效 地 冻结 应 用 程序 。 


只 要 浏览 器 中 的 Chrome 开 发 工具 开 着 ， 还 可 以 在 这 个 应 用 程序 代码 执行 的 位 置 使 用 
console.1og() 或 者 其 他 JavaScript 命 令 。 


当 完 成 应 用 程序 代码 调试 时 ， 需 要 确保 移 除 这 行 代码 ， 因 为 它 会 冻结 浏览 器 ， 甚 至 是 产品 。 








33.3 Angular Batarang 





Angular Batarang 是 一 个 由 Google 的 Angular 团 队 开 发 的 Chrome 扩 展 程序 ， 它 很 好 地 集成 了 调 
试 Angular 应 用 的 工具 ， 如 图 33-1 所 示 。 


:1 /chrome google.com/webstore /detail/angulan] 
a Angular)S aera EZIE 


Description A websae & 


Extends the Developer Tools, adding tools for debugging and profiling Angularjs 
applications. @ repor Mbuse 





图 33-1 ”Batarang Chrome 扩 展 


33.3.1 安装 Batarang 
要 安装 Batarang, 需要 从 Web Store 或 者 Github 仓 库 https://github.com/angular/angularjs-batarang 
中 下 载 这 个 应 用 程序 。 


安装 好 之 后 , 就 可 以 导航 到 开发 者 工具 中 启动 这 个 扩展 程序 , 然后 点 击 enable 来 启用 Batarang 
收集 页 面 的 调试 信息 。 


Batarang 人 允许 我 们 查看 Angular 应 用 的 作用 域 、 性 能 、 依 赖 和 其 他 关键 参数 。 
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33.3.2 ”检查 模型 

启动 Batarang 之 后 ， 页 面 会 重新 加 载 ， 然 后 你 会 注意 到 有 一 个 面板 允许 我 们 选择 页 面 中 的 不 
同 作用 域 。 

通过 点 击 + 按钮 可 以 选择 一 个 作用 域 ， 找 到 你 所 感 兴趣 的 元 素 ， 然 后 点 击 它 即 可 。 


一 旦 使 用 这 个 检查 器 选择 了 一 个 作用 域 , 就 可 以 查看 该 作用 域 元 素 上 的 所 有 属性 以 及 它们 的 
当前 值 ， 如 图 33-2 所 示 。 











Scopes Models for (000) 


genre: pop 
} 


Enable Inepector 








图 33-2 ”模型 检查 器 


33.3.3 ”检查 性 能 
还 可 以 通过 使 用 Batarang 的 性 能 部 分 来 检测 应 用 程序 的 性 能 。 


在 下 面 这 个 面板 中 , 可 以 看 到 应 用 程序 不 同 作 用 域 的 监控 列表 , 以 及 计算 每 个 表达 式 所 花 的 
时 间 ， 既 有 真实 的 时 间 ， 也 有 总 体 应 用 程序 执行 时 间 的 百分比 ， 如 图 33-3 所 示 。 








Metps / /www upbeatapp.com/ Mrack = 169 


Upber beat BEE me 
© 


sree The wd je" out Mov- 5) 
亚 一 : 一生 一 : 
~ Another Love . 
tvf 昌 y 





Performance 





Leg oomoe 


Watch Tree 





图 33-3 ”性 能 检查 需 


图 灵 社 区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 


434 第 33 章 ”调试 AngularJS 





33.3.4 ”检查 依赖 图 表 

Batarang 工 具 的 一 个 非常 不 错 的 特性 就 是 提供 了 一 个 内 联 的 可 视 化 依赖 图 表 。 在 这 里 ， 可 以 
查看 应 用 程序 的 依赖 ， 查 看 应 用 程序 所 依赖 的 不 同 的 库 ， 以 及 跟踪 应 用 程序 并 不 完全 依赖 的 库 ， 
如 图 33-4 所 示 。 




















Upbeat Er 
Service Dependencies 
人 
AN | 
SN 2 ， 
5 到 
es 
ew. 2 
a ee 


图 33-4 ”依赖 图 表 





33.3.5 ”可视化 应 用 
Batarang 还 允许 我 们 在 页 面 上 深入 查看 应 用 程序 。 使 用 选项 面板 时 ， 我 们 可 以 看 到 : 
Applications 独立 页 面 上 的 不 同 应 用 程序 ( 使 用 的 ngApp 指 令 )。 
Bindings 设置 在 视图 中 的 绑 定 ,使 用 的 ng-bingd 的 位 置 或 者 包 襄 在 模板 标记 {{ }} 中 的 元 素 。 
Scopes 视图 中 的 目标 作用 域 ， 并 且 可 以 深入 检查 。 


选项 面板 还 允许 我 们 查看 应 用 程序 所 用 的 Angular 版 本 ， 以 及 从 CDN 中 使 用 了 什么 ， 没 使 用 
什么 ， 如 图 33-5 所 示 。 

















Upbeat 




















图 33-$ ”选项 面板 


总 而 言 之 ， 当 我 们 要 深入 了 解 Angular 应 用 是 如 何 实时 工作 时 ，Batarang 工 具 为 我 们 提供 了 很 
多 便利 。 
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下 一 步 








现在 ， 我 们 已 经 熟悉 AngularJS 了 ， 接 下 来 一 起 看 看 那些 可 用 于 生产 环境 的 专业 工具 。 


34.1 jqLite 和 jQuery 

尽管 Angular 不 鼓励 依赖 jQuery 库 ， 但 是 在 应 用 中 仍然 可 以 使 用 它 。 只 需 确 保 在 
DOMContentLoaded 事 件 被 触发 之 前 载 人 它 或 者 手动 启动 应 用 即 可 。 

Angular 本 身 包含 了 一 个 叫做 jqLite 的 可 兼容 性 库 。 


本 书 使 用 过 的 angular .element() 方 法 就 返回 一 个 jqLite 对 象 ，jqLite 是 jQuery 库 的 子 集 ， 它 
人 允许 Angular 以 跨 浏 览 器 兼容 的 方式 维护 DOM。 


jqLite 并 不 试图 履 盖 jQuery 库 包 含 的 所 有 方法 ， 它 旨 在 保持 轻 量 ， 并 且 只 覆盖 了 Angular 要 用 
到 的 那些 方法 。 


这 个 库 包 含 以 下 jQuery 方法 。 

addClass() 给 元 素 添加 指定 的 类 。 

after() 在 元 素 的 后 面 插入 内 容 。 

append() 将 内 容 搬入 到 元 素 的 尾部 。 

attr() ”获取 或 者 设置 元 素 的 属性 " 值 。 

bind()/on() ”给 选中 元 素 的 一 个 或 者 多 个 事件 附加 一 个 事件 处 理 程序 
children() 获取 元 素 的 子 元 素 。 

clone() 创建 一 个 元 素 的 深 复制 。 

contents() ”获取 每 个 元 素 的 子 节点 ， 返 回 的 集合 中 包含 文本 和 注释 节点 。 
css() 获取 或 设置 元 素 的 style 属 性 值 。 

data() 存储 或 返回 与 元 素 关联 的 指定 数据 值 。 

eq() “获取 指定 索引 位 置 的 元 素 。 


























GD 这 里 的 属性 指 的 是 attributes。 译 者 注 
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find() 


过 滤 元 素 的 子 节点 ， 只 能 通过 标签 名 过 滤 。 


























hasClass() 确定 元 素 本 身 是 否 分 配 了 给 定 的 类 。 


htm1() 


next() 


获取 或 者 设置 元 素 的 HTML 内 容 。 
获取 紧 跟 元 素 的 兄弟 元 素 。 


off()/unbind() 通过 名 称 移 除 一 个 事件 处 理 程序 。 
parent() 获取 元 素 的 父 元 素 。 
prepend() “将 内 容 插入 到 元 素 的 开头 。 


prop() 


获取 或 设置 元 素 的 属性 " 值 。 


ready() ”指定 一 个 DOM 加 载 完 成 时 执行 的 函数 。 
remove() 从 DOM 中 移 除 元 素 。 

removeAttr() 从 元 素 中 移 除 一 个 属性 〈 attribute )。 
removeClass() 从 元 素 中 移 除 一 个 、 多 个 或 者 所 有 类 。 
removeData() ”从 元 素 中 移 除 先前 存储 的 数据 。 
repalceWith() 使 用 提供 的 新 内 容 蔡 换 元 素 。 


text() 











获取 或 者 设置 元 素 中 合并 的 文本 内 容 。 


toggleClass() 从 元 素 中 添加 或 者 移 除 一 个 或 者 多 个 类 。 
triggerHandler() 执行 附加 给 元 素 的 某 个 事件 的 所 有 事件 处 理 程序 。 


val() 


wrap() 

















获取 或 设置 元 素 的 当前 值 。 
使 用 指定 的 HTML 结 构 包 衰 元 素 。 





34.2 了 解 基本 工具 


AngularJS 社 区 非常 出 色 ， 还 编写 了 一 些 非常 不 错 的 工具 以 支持 AngularJS 开 发 。 接 下 来 我 们 
将 讨论 构建 工具 、 框 架 以 及 实时 交互 工具 。 





34.3 Grunt 
Grunt” 是 一 个 纯净 的 JavaScript 任 务 运行 器 。 开 发 JavaScript 应 用 程序 时 它 可 以 为 你 节省 很 多 时 


间 ， 这 包括 




















服务 需 端 和 客户 端 。 它 会 让 重复 任务 消失 ， 并 且 还 可 以 为 你 自动 处 理 








运行 任务 。 


JavaScript 社 区 到 处 都 在 用 Grunt 工 具 ， 并 且 已 经 创建 了 数 百 个 捅 件 。 如 果 需 要 或 者 想 用 的 捕 
件 还 没有 人 开发 ， 使 用 Grunt 工 具 创 建 自己 的 插件 也 非常 容易 。 



































@ 这 里 的 属性 指 的 是 property。 一 一 译 者 注 








© http://gruntjs.com/ 
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安装 

首先 , 必须 确保 你 已 经 安装 了 NodeJS”。NodeJS 是 一 个 以 Chrome 的 JavaScript 运 行 时 为 基础 的 
平台 ; 它 人 允许 你 使 用 JavaScript 作 为 服务 端 语言 编写 程序 。 

要 安装 Grunt， 可 以 使 用 NodeJS 自 带 的 内 置 nppm 工 具 : 




















$ npm install -g grunt-cli 


OG 传递 -g 标 志 可 以 让 grunt 命 令 运行 于 你 计算 机 上 的 任意 目录 。 





安装 好 Grunt 后 ， 还 需要 在 应 用 中 使 用 一 个 Grntfile 来 配置 Grunt 如 何 运 行 以 及 运行 什么 。 为 了 
使 用 Grunt 做 一 些 有 用 的 事情 ， 让 我 们 一 起 在 项 目 中 创建 一 个 Gruntfile.js。 


首要 的 事情 是 ， 必 须 创 建 一 个 package.json 文 件 来 告诉 Node 要 安装 哪些 东西 作为 依赖 。 





了 就 像 AngularJS 依 赖 处 理 一 样 ，NodeJS 也 有 一 个 用 于 依赖 管理 的 巧妙 的 方法 。 
package.json 文 件 将 会 是 你 编写 更 多 NodeJS 应 用 的 助手 。 





要 建立 默认 的 package.json 文 件 ， 可 以 运行 生成 器 或 者 从 默认 的 package.json 中 复制 粘贴 。 由 
于 npm in 让 命令 是 内 置 的 ， 就 使 用 它 吧 : 





























$ npm init 

这 个 命令 会 问 一 系列 问题 ， 比 如 新 应 用 的 名 称 、 版 本 以 及 更 多 问题 。 也 可 以 使 用 它 设置 所 有 
默认 值 ， 例 如 设置 应 用 的 名 称 就 是 个 不 错 的 选择 。 

完成 这 个 命令 后 ， 它 会 创建 一 个 package.json 文 件 ， 看 起 来 像 这 样 : 














{ 


"name": "myapp", 
"version": "0.0.0", 
"description": "Your myapp description", 
"main": "index.js", 
"scripts": { 
"test": "echo \" Error: no test specified\" && exit 1" 
hy 
"author": "Your name", 
"license": "MIT" 


} 
可 以 通过 再 次 使 用 npm 命 令 将 基本 的 grunt 命 令 安装 到 package.json 文 件 中 : 























$ npm install grunt --save-dev 





| --save-dev 标 记 用 于 将 grunt 作 为 开发 依赖 保存 。 如 果 想 将 它 作为 运行 时 依赖 ， 
可 以 只 使 用 --save 标 记 。 





Grunt 常 用 于 压缩 JavaScript 文 件 ， 这 样 就 可 以 发 送 尽 可 能 小 的 文件 给 浏览 需 。 这 个 过 程 





GD http://nodejs.org/ 
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有 用 ， 它 可 以 尽 可 能 快 地 加 载 应 用 ， 特 别 是 在 移动 设备 上 。 
这 里 使 用 Uglify 插 件 来 为 我 们 处 理 这 个 过 程 。 
$ npm install grunt-contrib-uglify --save-dev 


非常 好 ! 现在 可 以 使 用 Grunfile 来 配置 Grunt 了 。 要 配置 Grunt， 只 需 在 文本 编辑 器 中 载 人 
Gruntfile.js 文 件 然后 添加 以 下 代码 : 














module.exports = function(grunt) { 
// 配置 
grunt.initConfig({ 
pkg: grunt.file.readJSON('package.json') 
上 和 
// 加 载 插件 
// 默认 任务 


为 了 设置 一 个 配置 , 需要 让 Grunt 载 和 我们 想 使 用 的 所 有 插件 的 npm 任 务 。 由 于 这 里 正在 使 用 
usglify 任 务 ， 因 此 需要 让 Grunt 载 人 grunt-contrib-uglify 插 件 任 务 : 


























grunt.1oadNpmTasks( 'grunt-contrib-uglify'); 


要 配置 Uglify， 可 以 在 initconfig 对 象 内 使 用 uglify 属 性 放 入 一 个 配置 块 。 在 这 个 例子 中 ， 
先 创建 一 个 很 小 的 更 新 配置 ， 只 设置 了 src 和 dest 位 置 : 

















grunt.initConfig({ 
pkg: grunt.file.readJSON('package.json'), 
uglify: { 
build: { 
src: 'src/¢%= pkg.name %>.js', 
dest: 'build/<%= pkg.name %> .min.js' 


} 
上 


grunt-contrib-uglify 模 块 的 所 有 可 配置 选项 都 可 以 在 项 目的 README 中 找到 
(https://github.com/gruntjs/grunt-contrib-uglify )。 


| 注意 ， 使 用 Grunt 横 块 时 ， 配 置 文档 通常 都 在 项 目的 README 文 件 中 ， 或 者 
README 可 能 指向 其 可 用 的 配置 选项 。 


使 用 上 面 这 个 设置 ，Grunt 会 在 src/ 目 录 中 使 用 我 们 给 package.json 的 名 称 来 查找 JavaScript 文 
件 。 然 后 在 这 个 文件 上 运行 Uglify 任 务 。 


为 了 真正 告诉 Grunt 运 行 这 个 任务 ， 你 可 以 简单 地 运行 ugli fy 任务 : 
$ grunt uglify 


也 可 以 通过 声明 一 个 带 多 个 子 任务 的 任务 ,来 配置 Grunt 在 一 个 任务 中 运行 多 个 任务 : 


grunt.initConfig({ 
// 配置 


} 
grunt.register('default', ['uglify']); 


现在 ， 你 可 以 运行 grunt default ， 然 后 定义 在 数组 中 的 所 有 任务 都 会 运行 。 在 Grunt 中 
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default 任 务 具 有 特殊 意义 ， 对 于 像 这 样 配置 的 default 任 务 ， 可 以 只 运行 grunt 命 令 ， 所 有 这 些 
任务 都 会 运行 。 

你 可 能 对 这 个 功能 为 什么 如 此 有 用 比较 好 奇 。 在 这 个 例子 中 ,我 们 只 设置 了 运行 一 个 任务 ， 
但 是 如 果 使 用 的 是 CoffeeScript， 你 会 想 将 所 有 Angular 模 板 打 包 为 一 个 独立 文件 ,打包 less CSS 文 
件 ， 等 等 ，Grunt 可 以 为 你 处 理 所 有 这 些 。 


最 后 , Grunt 最 有 用 的 特性 之 一 是 , 它 能 够 监控 文件 系统 的 变化 以 及 在 变化 的 文件 上 执行 命令 。 
要 设置 监控 ， 只 需 遵循 与 上 面相 同 的 两 个 步骤 。 
首先 ， 要 安装 grunt-contrib-watch 这 个 npm 包 : 























$ npm install grunt-contrib-watch --save-dev 


接 下 来 ,在 initCconfig 对 象 中 设置 一 个 配置 块 : 





grunt .initConfig({ 
pkg: grunt.file.readJSON('package.json'); 


JS 二 
files: 'src/**/*.jSs', 
tasks: ['uglify'] 


} 
}); 


现在 你 可 以 运行 grunt watch，Grunt 会 监控 位 于 src/ 目 录 中 的 所 有 JavaScript 文 件 。 在 任何 文 
件 发 生变 化 时 ， 它 都 会 运行 ugli fy 任务 。 


34.4 grunt-angular-templates 

默认 情况 下 ，Angular 无 法 从 本 地 $tempalteCache 中 找到 模板 时 ， 会 通过 XHR 提 取 模 板 。 当 
XHR 请 求 很 慢 ， 或 者 模板 很 大 时 ， 它 可 能 会 对 应 用 的 用 户 体验 造成 很 大 的 负面 影响 。 

你 可 以 通过 “伪造 ”templateCache 已 经 被 填充 的 方式 来 避免 这 一 延迟 ， 这 样 Angular 就 不 必 
从 远程 加 载 模板 。 可 以 在 JavaScript 中 手动 实现 这 个 技巧 ， 就 像 这 样 : 

angular .module( 'myApp',[]) 

.run(function($templateCache) { 

$templateCache.put('home.html', 'This is the home template'); 


}); 


现在 ， 当 Angular 需 要 提取 名 为 home.html 的 模板 时 ， 它 会 在 $templateCahce 中 找到 它 ， 而 无 
需 从 服务 器 提取 。 


如 果 想 为 服务 需 打 包 应 用 , 手动 处 理 的 步骤 就 会 很 繁琐。 幸好 ，grunt-angular-templates 
这 个 Grunt 任 务 可 以 帮 我 们 完成 。 


34.4.1 安装 
首先 ， 需 要 安装 这 个 Grunt 任 务 。 可 以 使 用 npm 以 如 下 方式 安装 它 : 
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$ npm install --save-dev grunt-angular-templates 


OG 这 里 使 用 --save-dev 任 务 会 将 这 个 Grunt 任 务 存 储 到 package.json 文 件 中 ， 这 是 
一 种 很 好 的 做 法 。 保 存 依赖 和 版 本 时 可 以 很 容易 地 为 应 用 程序 创建 新 的 开发 环 
境 。 如 果 没 有 使 用 package.json 文 件 ， 可 以 忽略 这 个 标记 ， 它 不 会 造成 任何 损害 。 
npm 将 会 输出 一 个 没有 使 用 package.json 的 警告 信息 。 
接 下 来 ， 需 要 在 Gruntfile.js 中 引用 这 个 新 任务 ， 就 像 这 样 : 


grunt.1oadTasks( 'grunt-angular-templates ' ); 


现在 ， 你 可 以 在 Grunt 任 务 中 安全 地 使 用 这 个 任务 了 。 


34.4.2 ”用 法 





这 个 任务 本 身 会 编译 一 个 JavaScript 文 件 ， 你 需要 在 你 的 index.html 加 载 它 。 例 如 ， 如 果 让 这 
个 任务 生成 templates.js 文 件 ， 那 么 就 需要 在 index.html 中 载 人 它 : 














<script src="templates.js">¢/script> 


首先 ， 和 任何 其 他 Grunt 任 务 一 样 ， 你 需要 配置 它 。 配 置 模板 的 属性 是 ngtemplates。 在 这 个 
ngtemplates 配 置 块 内 ， 我 们 设置 了 一 个 子 任务 ， 它 的 名 称 就 是 我 们 加 载 的 Angular 模 块 的 名 称 。 


例如 : 














ngtemplate: { 
myApp: {} 
} 


这 个 代码 生成 的 templates.js 文 件 输出 为 : 


angular .module( 'myApp') 

.run(['$tempateCache'], function($templateCache) { 
$templateCache.put('home.html', ...); 

扫 


子 任务 的 名 称 myApp 与 Angular 模 块 的 名 称 相同 ，$templateCache 会 将 它 放 到 它 的 模板 中 。 
而 选项 将 会 设置 在 这 个 子 任务 内 。 


34.4.3 可 用 选项 


1. bootstrap 


日 


默认 情况 下 ，grunt-angular-templates 会 把 function($templateCache) {} 包 庄 到 angular. 
module( 'myApp' ).run(['$templateCache'，__]); 内。 如 果 你 在 CommonJS 或 者 RequireJS 中 使 
用 了 bootstrap 选 项 ， 那 么 可 以 改变 这 个 配置 : 











yA 
bootstrap: function(module, exports) { 

return 'module.exports [module]=' + Script + ';' 
} 
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2. concat 
concat 是 concat 定 义 内 的 目标 名 称 ， 这 是 你 要 添加 编译 后 的 模板 路 径 的 地 方 。 
3. htmlmin 


正如 可 以 压缩 CSS 和 JavaScript 文 件 一 样 ， 还 可 以 使 用 一 个 叫做 ( 意料 之 中 ) htmlmin 的 工具 
来 压缩 HIML。grunt-angular-templates 能 够 很 好 地 和 htmlmin 一 起 工作 ， 此 外 ， 它 甚至 还 允 
许 压 缩 模板 内 的 HTML。 


你 可 以 在 配置 内 为 htmlmin 设 置 选项 ， 就 像 这 样 : 


ngtemplates: { 
myApp: { 
options: { 
htmlmin: { 
collapseBooleanAttributes: true, 
collapseWhitespace: true, 
removeAttibuteQuotes: true, 
removeEmptyAttributes: true, 
removeRedundantAttributes: true, 
removeScriptTypeAttributes: true, 
removeStyleLinkTypeAttributes: true 


} 
4. module 
angular .module 的 名 称 ， 模 板 缓存 会 将 这 个 名 称 注册 为 模板 要 缓存 的 模块 。 


ngtemplate: { 
myApp: { 
options: { 
module: 'myBestApp' 
} 


} 
因此 将 会 看 到 以 下 方式 的 模板 设置 : 


angular .module( 'myBestApp') 
.run(['$templateCache'], 
function($templateCache) { 
Ws i 
1); 


5. prefix 


我 们 可 以 为 所 有 的 模板 URL 设 置 一 个 前 级 。 例如 ， 如果 想 使 用 绝对 URL 来 存 取 来 自 不 同 目录 
中 绝对 位 置 的 模板 ， 要 像 这 样 设置 前 级 : 











ngtemplate: { 
app: { 
options: { 
prefix: '/public' 
} 
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6. source 
可 以 将 source 选 项 设 为 一 个 也 数 , 它 会 在 模板 被 编译 之 前 , 源 文件 被 压缩 之 后 调用 ,因此 可 
以 自 定 义 模板 文件 输出 。 例 如 ， 可 以 给 源 文件 添加 一 个 标准 的 头 部 。 
这 个 函数 会 使 用 这 些 选 项 调用 。 
口 source: 压缩 后 的 模板 资源 。 


口 path: 模板 文件 路 径 。 
口 options: 任务 选项 对 象 。 











7. standalone 


这 个 布尔 值 选项 标记 用 于 告诉 Grunt 任 务 模板 ， 它 到 底 是 独立 的 ， 还 是 现 有 模块 的 一 部 分 ， 
比如 myApp。 大 多 情况 下 ， 这 个 选项 都 应 该 设置 为 false (这 也 是 它 的 默认 值 )。 


8. ur1 


设置 ur1 选 项 时 会 重 写 模 板 的 $templatecache URL。 通常 ,特殊 情况 下 才 使 用 这 个 选项 ; 设 
置 cwd 和 src 可 以 让 模板 用 于 XHR 和 $templateCache。 








34.4.4 用 法 
grunt-angular-templates 的 作者 提供 了 许多 选项 ， 告 诉 我 们 可 以 如 何 使 用 这 个 任务 。 


1. concat 
使 用 该 任务 的 最 简单 方式 就 在 concat 任 务 内 。 它 的 任务 是 负责 压缩 concat 任 务 内 的 位 置 。 


concat: { 
app: { 
src: ['*.js', '<%= ngtemplates.app.dest %>'], 
dest: ['app.js'] 


} 
现在 模板 将 被 附加 到 app.js 文 件 的 尾部 。 
2. usemin 


grunt-usemin 是 一 个 压缩 和 合并 内 联 请 求 JavaScript 文 件 的 任务 ， 可 以 在 产品 中 压缩 和 合并 
源 文 件 ， 但 是 在 开发 中 继续 使 用 未 压缩 的 依赖 。 例 如 : 











《!-- builgd:js module.js --—>» 

<ScTript src="scripts/app.js">¢/script> 

<ScTript src="scripts/controllers.js"></script> 
<!-— endbuild -——> 


文件 会 被 压缩 为 module.js。 然 后 可 以 将 这 个 文件 作为 目标 文件 附加 给 模板 。 


ngtemplates: { 
app: { 
src: 'templates/*.html', 
dest: 'template.js', 
options: { 
concat: 'module.js’' 
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} 
} 
} 


3.dest 


最 后 , 还 可 以 通过 指定 一 个 目标 位 置 来 正常 地 生成 templates.js, 而 不 是 简单 地 分 配 一 个 dest: 
键 作为 文件 路 径 插 入 另 一 个 文件 。 


ngtemplates: { 
app: { 
src: 'templates/x*.html', 
dest: 'template.js' 














34.5 Lineman 





Lineman 是 一 个 构建 工具 ， 它 允许 我 们 主要 关注 构建 客户 机 (或 者 客户 端 ) Web 应 用 。 它 混 
合 了 很 多 令 人 难以 置信 的 功能 ， 让 客户 端 webapp 开 发 变 得 有 趣 和 容易 。 
Lineman 由 社区 构建 和 维护 ， 它 使 得 前 端 webapp 开 发 多 产 ， 并 且 可 维护 、 可 管理 。 


本 书 一 直 都 在 单个 mdex.html 文 件 中 开发 客户 端 应 用 程序 , 我 们 一 直 使 用 浏览 器 加 载 该 应 用 。 
Lineman 使 用 了 不 同 的 方式 ， 它 凭借 本 地 服务 器 服务 于 应 用 程序 。 


使 用 本 地 服务 器 为 文件 提供 服务 时 ，Lineman 可 以 提供 那些 不 能 在 静态 文件 中 使 用 的 特殊 功 
能 。 包 括 : 


口 保存 文件 时 编译 CoffeeScript 文件 为 JavaScript; 
口 运行 Less ”和 Sass” 预 处 理 器 生成 CSS; 

口 提供 后 端 替代 工具 ， 因 此 后 端 服务 器 可 有 可 无 ; 
口 预 编 译 JavaScript 模 板 ; 

口 为 后 端 服务 器 代理 XHR 请 求 ; 

口 让 测试 更 容易 和 有 趣 。 


Lineman 明 确 不 会 处 理 任 何 后 端 服务 器 ( 尽管 它 提供 了 一 种 调用 后 端的 方式 ， 正 如 我 们 将 会 
看 到 的 )。 它 重点 关注 构建 可 以 编译 、 压 缩 和 部 署 为 静态 Web 应 用 的 AngularJS 应 用 。 


要 使 用 Lineman ,需要 确保 安装 了 NodeJS"; 它 自 带 了 用 于 打包 的 npm 工 具 。, 为 了 使 用 Lineman,， 
可 以 使 用 npm 全 局 安装 它 。 


















































$ npm install -g lineman 


虽然 我 们 将 使 用 Lineman 运 行 项 目 ,但 这 里 还 没 使 用 打包 生成 器 。 相 反 , 这 里 将 会 使 用 由 David 
Mosher 创 建 的 AngularJS 模 板 。 











CD http://coffeescript.org/ 
©® http:/lesscss.org/ 

@) http://sass-lang.com/ 
(@ http://nodejs.org/ 
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$ git clone https://github.com/davemo/lineman-angular-template my-app 

克隆 好 这 个 模板 之 后 〈 使 用 Git )， 便 于 操作 ， 可 以 使 用 npm 再 次 安装 Lineman 需 要 的 依赖 

$ cd my-app && npm install -qd 

依赖 安装 好 之 后 ， 就 可 以 开始 开发 应 用 了 。 接 下 来 我 们 会 编写 这 个 运行 测试 以 及 服务 器 的 
应用。 

为 了 运行 应 用 ， 还 需要 在 my-app 目 录 中 启动 Lineman 工 具 。 

$ lineman run 


至 此 ， 我 们 的 应 用 会 运行 在 浏览 器 的 http://localhost:8000 中 ， 如 图 34-1 所 示 。 


Wm Ey Neeman- sngular -template 


A Lineman Angular Setup 


图 34-1 运行 Lineman 


正如 你 看 到 的 那样 ，Angular 有 几 个 生成 应 用 的 模板 。 可 以 看 到 这 个 目录 结构 还 包含 一 些 其 
他 目录 。 


口 app: 包含 应 用 程序 文件 。 


和 CSS: CSS 文 件 (Less 或 者 CSS 文 件 )。 
sm img: 图 片 文件 。 

m js: Angular 应 用 。 

a pages: 要 编译 的 HTML 模 板 。 

mm templates: Angular 模 板 。 


口 config: Lineman 特 定 的 配置 文件 。 

口 doc: 应 用 文档 目录 。 

D dist: 一 个 生成 的 用 于 构建 应 用 的 目录 。 

口 generated: 使 用 lineman run 运 行 应 用 生成 的 目录 。 

口 spec: 所 有 非 端 到 端的 说 明文 档 。 

口 spec-e2e: 分 度 器 说 明文 档 。 

口 tasks: 所 有 自 定 义 的 Lineman 任 务 都 应 该 存放 在 这 里 。 
口 vendor: 包含 所 有 第 三 方 CSS 、JavaScript 和 图 片 文件 。 
口 Gruntfile.js: 提供 1ineman 的 Gruntfile。 

口 package.json: 应 用 程序 定制 ， 定 义 依赖 和 其 他 元 数据 。 
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Lineman 提 供 了 一 个 可 以 快速 高 效 编写 Web 应 用 的 结构 。 


34.6 Bower 
Bower 是 Web 开 发 中 的 一 个 前 端 文件 包 管 理 器 。 类 似 于 Node 模 块 的 npm 包 管理 器 ， 它 允许 开 
发 者 为 服务 器 编写 可 共享 的 模块 。Bower 为 Web 组 件 提 供 了 类 似 的 功能 。 


它 凭借 一 个 通用 的 、 中 性 且 易 用 的 接口 为 依赖 问题 提供 了 一 个 解决 方案 。 它 是 基于 Git 运 行 
的 ， 并 且 包 是 未 知 的 。 它 还 支持 其 他 传送 类 型 ， 比 如 requireJS 、AMD ， 等 等 。 















































34.6.1 安装 
安装 很 简单 : 只 需 使 用 包 管 理 需 npm 安 装 bpower 即 可 : 








$ npm install -g bower 


OG bower 依 赖 于 Git、Node 和 npm。 























然后 ， 可 以 通过 输入 help 命 令 来 确认 它 是 否 安装 成 功 : 
$ bower help 


如 果 输 出 显示 界面 如 图 34-2 所 示 ， 表 示 可 以 使 用 了 。 











图 34-2 ”Bower 帮 助 视 网 


34.6.2 ”Bower 简 介 


尽管 这 里 只 会 涵盖 一 些 简 短 的 简介 , 但 是 鼓励 和 到 Bower 主 页 : bower.io" 进 行 更 多 
的 探索 。 





对 于 Web 应 用 ,你 可 能 想 要 与 其 他 开发 人 员 共 享 源 代码 或 者 部 署 到 其 他 开发 机 器 上 。 与 适用 
于 npm 的 packagejson 类 似 ， 可 以 使 用 一 个 bowerjson 文 件 存 储 前 端 依赖 。 











人 http://bower.io/ 


图 灵 社 区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 





446 第 34 章 下 一 步 








为 了 开始 使 用 bowerjson, 可 以 使 用 Bower 提 供 的 init 命 令 。 我 们 应 该 在 项 目的 根 目 录 执 行 它 : 
$bower init 


这 条 命令 会 启动 一 个 设置 向 导 ， 它 问 一 些 关 于 新 程序 包 的 问题 。 回 答 完 以 后 ,会 在 当前 目录 
生成 一 个 新 的 bowerjson 文 件 。 














34.6.3 配置 Bower 


Bower 自 带 了 健全 的 默认 配置 ， 但 它 也 是 高 度 可 配置 的 。 你 可 以 配置 安装 程序 包 的 目录 ， 并 
注册 哪个 目录 用 于 安装 组 件 。 














https://docs.google.com/document/d/1 APq70oA9tNaol UY WyOm8dKqglRP2blVkKkROYLZ 
Q、 2fLIjtWce/edit#heading=h.4pzytclf9j8k 上 可 以 看 到 更 多 的 Bower 配 置 文档 。 推 荐 你 参 
考 这 份 文档 了 解 更 多 详细 配置 信息 。 
尽管 深入 了 解 bower 的 配置 信息 不 在 本 章 范 围 之 内 ,但 我 们 将 会 看 到 两 个 最 常见 的 修改 配置 
项 ( 基于 我 们 自己 的 经 验 )。 
要 配置 Bower, 可 以 编辑 .bowerrc 文 件 , 传递 配置 参数 , 或 者 设置 环境 变量 。 还 可 以 将 .bowerrc 
文件 放 在 不 同 的 地 方 : 
口 项 目 当前 工作 目录 中 ; 
口 目录 树 的 任意 子 目录 中 ; 
口 当前 用 户 的 主 目录 中 ; 
口 全 局 的 Bower 目 录 中 。 
.bowerrc 文 件 包含 一 个 适用 于 配置 的 JSON 对 象 。 比 如 ， 要 改变 颜色 配置 ，.bowerrc 文 件 应 该 

















{ 


"color": false 


} 


为 了 简单 起 见 ， 这 里 我 们 将 .bowerrc 文 件 放 在 项 目的 根 目 录 中 。 如 果 不 存 在 ,推荐 在 项 目的 
根 目录 中 创建 它 : 


$ echo "{}" > .bowerrc 


cwd cwd 配 置 变量 表示 应 该 从 哪个 目录 运行 Bower。 所 有 其 他 路 径 都 应 该 直接 相对 于 这 个 
日 录 。 


directory directory 配 置 变量 表示 安装 的 组 件 应 该 保存 在 哪个 路 径 中 。 默 认为 bower 
components。 这 依赖 于 如 何 创建 应 用 ， 可 以 修改 这 一 配置 以 适应 不 同 的 目录 结构 : 
{ 


"directory": "app/components" 


} 
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34.6.4 ”搜索 程序 包 
为 了 找到 程序 包 用 于 安装 ，Bower 包 含 了 一 个 搜索 命令 用 于 搜索 注册 的 索引 : 





## Searching for bootstrap-sass 
$ bower search bootstrap-sass 


34.6.5 ”安装 程序 包 

安装 程序 包 同 样 很 简单 。 如 果 有 一 个 现 有 的 bowerjson 文 件 ， 可 以 简单 地 运行 安装 命令 。 它 
会 拉 取 并 安装 前 端 依赖 到 Bower 目 录 中 : 

$ bower install 

你 可 以 通过 在 文件 上 显示 调用 安装 命令 的 方式 , 安装 程序 包 到 本 地 。 也 可 以 安装 指定 版 本 的 
程序 包 ， 甚 至 为 程序 包 的 安装 设置 一 个 别名 。 














Install a local or 

default remote version of a package 
bower install 《packagey》 

Install a specific version of a package 
bower install <package»#¢version> 

Alias install a package 

bower install name=<package>#¢version> 
For instance 
bower install bootstrap=bootstrap-sass 


bowerjson 文 件 可 以 存储 多 个 类 型 的 依赖 : 要 么 是 运行 时 的 依赖 ( 比如 Angular 或 者 jQuery )， 
或 者 是 开发 过 程 中 需要 的 依赖 ( 比如 karma 或 者 Bootstrap-sass )。 

# JInstall a run-time dependency 

$ bower install angular-route --save 


# Install a dev dependency 
$ bower install bootstrap-sass --save-dev 


如 果 将 bowerjson 文 件 的 内 容 打 印 出 来 ， 将 会 看 到 使 用 新 安装 的 依赖 更 新 后 的 内 容 : 


$ cat bower. json 


{ 


{从 提 给 间 纷 间 埠 提 # 

















"name": "myApp", 
"version": "0.0.1"， 
"authors": [ 
"Ari Lerner <ari@fullstack.io>" 
], 
"license": "MIT", 
"dependencies": { 
"angular-route": "~1.2.13" 
}, 
"devDependencies": { 
"bootstrapp-sass": "~3.0.0" 





] 


34.6.6 ”使 用 程序 包 
现在 程序 包 已 经 安装 好 了 , 我 们 可 以 通过 在 HTML 源 代码 中 使 用 script 标 记 的 方式 引入 这 些 
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程序 包 ， 就 像 引入 本 地 目录 中 的 任何 其 他 脚本 一 样 。 
<ScTipt 


src="/bower_components/angular/angular.js"> 
</script> 


34.6.7 ” 移 除 程序 包 
使 用 Bower 移 除 程 序 包 也 是 可 能 的 。 可 以 在 Bower 目 录 手 动 删 除 文 件 ， 或 者 运行 uninstall 


oo 


这 个 uninstal1 命 令 人 允许 我 们 使 用 --save 和 --save-dev 标 记 映 射 bowerjson 文 件 的 变化 。 


如 


命令 








# Remove a dependency 

$ bower uninstall --save-dev angular-route 
# Remove a devDependency 

$ bower uninstall --save-dev bootstrap-sass 





34.7 Yeoman 
Yeoman" 是 本 章 前 面 讨论 过 的 一 个 工具 的 集合 : 
口 Yeoman ; 
口 Grunt; 
口 Bower。 











Yeoman 本 身 是 一 个 脚手架 工具 ， 通 过 配置 Grunt 配 置 ， 构 建 应 用 程序 工作 空间 和 管理 工作 流 
程 ， 以 及 帮助 我 们 构建 新 的 应 用 程序 ， 不 管 我 们 构建 的 应 用 程序 类 型 。 


在 编写 本 书 时 ， 大 约 有 300 个 社区 编写 的 生成 器 可 用 ， 这 些 生成 器 已 经 建立 了 很 多 不 同类 型 
的 项 目 ， 从 Angular? 站 点 到 Backbone.js 站点， 甚至 还 包括 Python flask 项目 。 


Grunt 被 设 定 为 构建 工具 ， 而 Bower 用 来 处 理 依赖 管理 。 























34.7.1 安装 


安装 Yeoman 很 简单 。 首 先 ， 需 要 确保 安装 了 Node.js“ 和 Git"。 某 些 生 成 器 可 能 还 需要 安装 
Ruby” 和 Compass”。 
安装 好 这 些 依赖 之 后 ， 可 以 使 用 npm 安 装 Yeoman: 


$ npm install -g yo 





GD http://yeoman.io/ 

© https://github.com/yeoman/generator-angular 
© https://github.com/yeoman/generator-backbone 
(@ https://github.com/romainberger/yeoman-flask 
© http://nodejs.org/ 

© http://git-sem.com/ 

© https://www.ruby-lang.org/ 
http://compass-style.org/ 
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安装 Yeoman 时 会 自动 安装 Grunt 和 Bower。 
接 下 来 ， 为 了 使 用 Yeoman ， 还 需要 安装 生成 器 ( Yeoman 本 身 不 带 生 成 器 )。 
我 们 来 安装 Angular 生 成 器 : 


$ npm install -g generator-angular 





要 搜索 社区 中 所 有 可 用 的 生成 器 ， 可 以 参考 http://yeoman.io/communitygenerators. 


34.7.2 用 法 

使 用 Yeoman 工 作 流 也 很 容易 。 首 先 最 重要 的 是 ， 要 创建 一 个 可 以 进行 工作 的 目录 。Yeoman 
并 不 会 为 我 们 创建 工作 目录 ; 相反 ， 它 会 假定 我 们 正在 使 用 的 目录 就 是 存放 应 用 的 目录 。 

$ mkdir myapp && cd $_ 


我 们 将 会 在 这 个 目录 内 运行 生成 右 架 构 项 目 。 在 这 个 例子 中 ， 我们 使 用 generator-angular 
这 个 Angular 生 成 需 ， 如 图 34-3 所 示 。 


























$ yo angular 


myapp 一 node — Solarized Dark xterm-256color — 80x24 





图 34-3” ”Yeoman 安装 


Yeoman 会 问 一 些 问题 ， 然 后 创建 应 用 程序 。 在 这 些 步骤 中 ， 它 会 调用 npm instal1 和 bower 
instal1 确 保 所 有 的 依赖 已 经 存在 ， 这 样 便 可 以 立即 进行 开发 。 


我 们 将 使 用 grunt 命 令 开始 我 们 的 开发 过 程 。 











$ grunt server 


grunt server 命 令 会 启动 一 个 本 地 服务 器 在 本 地 为 应 用 提供 服务 。 当 我 们 在 工作 空间 中 保存 
文件 时 它 会 使 用 livereload 自动 重 载 浏览 


它 为 我 们 构建 的 这 个 目录 有 一 个 坚实 的 结构 , 用 于 部 署 容易 扩展 的 Angular 应 用 , 如 图 34-4 所 示 。 




















人 http://livereload.com/ 
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图 34-4 Yeoman 生 成 的 目录 结构 


Yeoman 创 建 的 目录 结构 构建 了 app/ 和 test/ 目 录 。 在 app 目 录 内 ， 将 会 用 来 构建 Angular 应 用 和 
存放 视图 、 样 式 和 应 用 程序 的 其 他 部 分 。 


当 我 们 想 要 创建 一 个 控制 器 时 ,需要 添加 一 个 带 有 描述 名 称 的 文件 到 控制 器 目录 。 然 后 还 需 
要 确保 在 index.html 中 引入 它 作 为 文件 加 载 。 


例如 ， 添 加 一 个 仪表 盘 控 制 器 时 ， 将 会 创建 app/scripts/controllers/dashboard.js 和 Dashboard- 
Controller 定 义 : 

















"Use strict'; 


// 在 app/scripts/controllers/dashboard.js 中 
angular .module( 'myappApp' ) 
.controller('DashboardController', function($scope) { 


}9; 


为 了 引入 这 个 控制 器 ， 需 要 让 应 用 程序 在 index.html 中 加 载 这 个 文件 。 还 需要 确保 在 应 用 内 
的 构建 注释 中 引入 它 ， 这 样 htmlmin 任 务 才 会 在 压缩 HTML 时 引入 它 。 

《!-- builgd.js({.tmp, app}) scripts/scripts.js -—-> 

<script src="scripts/app.js">¢/script> 

<ScTript src="scripts/controllers/main.js"></script> 


<script src="scripts/controllers/dashboard.js">¢/script> 
《!—— endbuild ——>» 


这 样 就 可 以 在 应 用 中 使 用 这 个 控制 器 了 。 这 个 过 程 可 用 于 将 在 应 用 中 使 用 的 各 类 Angular 组 
件 〈 例 如 服务 、 过 滤器 和 指令 )。 


如 果 将 应 用 分 离 为 多 个 组 件 〈 强烈 推荐 ) 作为 应 用 的 依赖 ， 需 要 确保 在 上 面 的 appjs 文 件 之 
前 引入 这 些 组 件 。 例 如 ， 如 果 遵 循 多 模块 模式 将 会 为 每 个 组 件 生成 一 个 新 模块 : 

















// 在 app/scripts/services/api.js 中 


angular .module( 'myApp.services', [|]) 
.factory('ApiService', function() { 
return {}; 
上 
然后 设置 这 些 模块 作为 应 用 的 依赖 : 
// 在 app.js 中 
angular .module( 'myApp', ['myApp.services']); 
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最 后 在 HTML 中 还 需要 在 引入 app.js 之 前 引入 这 些 服务 。 
此 外 ，Angular 咎 成 器 还 自 带 了 一 些 有 用 的 生成 髓 ， 让 构建 Angular 应 用 的 过 程 变 得 更 容易 。 





34.7.3 创建 路 由 


要 创建 一 个 包含 控制 器 的 路 由 以 适应 控制 器 测试 , 在 HTML 中 引入 <script> 标 签 并 为 路 由 创 
建 视图 ， 需 要 在 终端 中 运行 以 下 命令 ， 如 图 34-5 所 示 。 


$ yo angular:route home 


Aaneo myapp 一 zih 一 Solarized Dark xterm-256coloe 一 113x31 





图 34-$ ”创建 一 个 新 路 由 





34.7.4 创建 控制 器 
为 了 创建 一 个 简单 的 控制 器 以 适应 测试 ， 可 以 在 终端 中 使 用 生成 器 : 


$ yo angular:controller user 





34.7.5 创建 自 定义 指令 
为 了 创建 指令 适应 测试 ， 还 可 以 使 用 如 下 命令 创建 指令 


$ yo angular:directive tabPanel 


34.7.6 创建 自 定 义 过 滤器 
还 可 以 在 应 用 中 创建 自 定义 过 滤器 以 适应 测试 。 为 了 做 到 这 一 点 ， 可 以 使 用 如 下 生成 器 : 


$ yo angular:filter capitalize 





34.7.7 创建 视图 
为 了 生成 一 个 简单 的 视图 ， 也 可 以 使 用 Angular 生 成 器 命令 


$ yo angular:view dashboard 
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34.7.8 创建 服务 
此 外 ， 也 可 以 使 用 生成 器 创建 服务 。 下 面 我 们 以 不 同 格式 创建 了 一 个 服务 以 适应 测试 。 


$ yo angular:service api 
$ yo angular:factory api 
$ yo angular:provider api 
$ yo angular:value api 

$ yo angular:constant api 





34.7.9 创建 装饰 器 
Angular 生 成 器 还 可 以 在 其 他 服务 之 上 创建 装饰 器 。 只 需 在 终端 执行 这 个 命令 : 
$ yo angular:decorator api 
34.8 配置 Angular 生成 器 
对 于 前 面 提 到 的 生成 器 (包括 主 生成 器 )， 我 们 都 可 以 传递 选项 以 自 定义 的 方式 配置 脚本 。 








34.8.1 CoffeeScript 
如 果 想 要 生成 CoffeeScript 文 件 而 不 是 JavaScript 文 件 ， 通 过 传递 --coffee 选 项 可 以 很 容易 做 到 ; 








$ yo angular:controller user --coffee 


34.8.2 ”安全 压缩 


尽管 这 不 是 必要 的 (因为 Yeoman 生 成 器 包含 ngMin )， 仍 然 可 以 使 用 --minsafe 标 记 , 让 生成 
需 在 生成 的 文件 中 加 入 依赖 注入 声明 : 








$ yo angular:controller user session--minsafe 


34.8.3” 跳 过 索引 


默认 情况 下 ， 前 面 提 到 的 所 有 生成 器 都 会 在 index.html 中 添加 适当 的 文件 进行 加 载 。 我 们 也 
可 以 让 生成 器 在 index.html 中 不 引入 脚本 。 





| 你 可 能 希望 跳 过 添加 文件 到 主页 中 ， 比 如 构建 第 三 方 插件 。 


$ yo angular:factory session --skip-addq 


34.9 测试 应 用 


Yeoman 的 Angular 生 成 器 最 好 的 特性 之 一 便 是 ， 它 允许 我 们 在 开发 应 用 时 对 应 用 程序 进行 无 
颖 测试。 
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这 个 生成 器 打包 了 一 个 测试 命令 , 它 会 在 我 们 在 应 用 中 保存 文件 时 运行 。 这 个 打包 让 测试 程 
序 很 容易 集成 到 工作 流程 中 。 
要 运行 测试 而 无 需 监控 文件 ( 比如， 运行 一 次 )， 可 以 使 用 这 条 命令 : 





$ grunt test 

这 条 命令 运行 一 次 之 后 就 会 退出 ,推荐 对 这 个 工作 流程 做 出 两 个 修改 从 而 在 应 用 中 引入 自动 
化 测试 。 

首先 ， 在 应 用 程序 的 根 目录 打开 Gruntfile.js 文 件 ， 找 到 Karma 任 务 。 然 后 ,将 选项 singleRun 
从 true 改 为 false: 


pl 











] 
]， 
karma: { 
unit: { 
configFile: 'karma.conf.js', 
singleRun: false // 将 这 个 选项 改 为 false 
} 
二 
cdnify: { 
A rae 


其 次 ， 打 开 karma.confjs 文 件 ， 将 autowatch 选 项 从 false 改 为 true。 


现在 ,运行 grunt test 时 ， 不 再 是 运行 一 次 后 退出 ， 这 个 任务 将 会 一 直 开 着 ， 同 时 监控 文 
件 。 只 要 改变 文件 并 保存 ， 这 个 测试 任务 就 会 再 次 运行 。 








34.10 打包 应 用 


在 开发 好 应 用 程序 之 后 ,我 们 想 要 建立 一 个 发 布 版 本 的 应 用 。 创建 发 布 版 本 的 应 用 时 , 要 包 
含 所 有 压缩 后 的 JavaScript 和 HTML 文 件 ， 还 要 打包 视图 ， 预 处 理 CSS ， 等 等 。 

要 运行 构建 任务 ， 可 以 简单 地 运行 grunt build 命令: 

$ grunt build 

这 会 花 一 些 时 间 运 行 完整 的 生成 器 。 当 任务 完成 时 , 在 应 用 的 根 目录 会 得 到 一 个 dist/ 文 件 夹 。 
这 个 文件 夹 包含 所 有 适用 于 产品 部 署 的 文件 。 

可 以 将 这 个 文件 夹 上 传 到 服务 器 中 ， 或 者 部 署 到 服务 器 中 让 应 用 程序 能 够 被 用 户 访问 。 





34.11 打包 模板 
要 使 应 用 程序 显示 得 更 快 , 并 且 无 需 依靠 服务 器 传输 模板 , 我 们 可 以 使 用 的 方法 是 将 模板 文 
件 转 换 为 JavaScript 文 件 。 


使 用 Angular 的 templateCache 时 ， 我 们 会 把 模板 包含 到 JavaScript 文 件 中 。 例 如 ,使 用 XHR 
替代 Angular 提 取 HTML 时 : 
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<div class="hero-unit"> 
<h1>'Allo, 'Allo!l<¢/h1> 
<p>You now have</p> 
<U1> 
<1i ng-repeat="thing in awesomeThings">{{fthing}}</liy> 
</ul> 
<p>installed. «</p> 
<h3>Enjoy coding! - Yeoman</h3> 
</div> 


你 可 以 打包 它们 到 一 个 JavaScript 中 ， 然 后 分 离 这 个 JavaScripf 文 件 ， 就 像 这 


angular.module('myApp ' ) 
.run(['$templateCache', function($templateCache) { 
$templateCache.put('views/main.html', 
"<div class=\"hero-unit\">\n" + 
<h1i>'Allo, 'Allol</hi>\n" + 
<p>You now have¢/p> \Nn" + 
<Ul>\n" + 
<1i ng-repeat=\"thing in awesomeThings\">{{thing}}</li>\n" + 
</Ul>\Nn" + 
<p>installed.</p>\Nn" + 
<h3>Enjoy coding! - Yeoman</h3>\n" + 
erdivy nn” 





); 
}]); 


要 完成 这 个 设置 ， 需 要 修改 Gruntfile.js 引 入 新 任务 定义 ,来 使 用 新 的 npm 包 grunt-angular- 
七 emplates。 

首先 ， 要 安装 这 个 包 : 

$ npm install --save-dev grunt-angular-templates 


接 下 来 ， 修 改 Gruntfile.js 引 和 人 ngtemplates 任 务 。 








YA 
} 
}, 
ngtemplates: { 
myappApp: { 
cwd: '<%= yeoman.app %>' 
src: 'views/**/*.html', 
dest: '<%= yeoman.app %>»/scripts/templates.js' 
} 
}; 
// 将 不 处 理 的 文件 放 在 其 他 任务 中 
copy: { 
YA 
一 修改 仅 在 应 用 目录 中 创建 了 一 个 新 文件 ,这 个 文件 将 会 包含 作为 JavaScript 加 载 的 模板 
文件 。 


文 里 还 需要 确保 在 构建 过 程 中 运行 这 个 任务 。 幸 好 ， 将 这 个 任务 添加 到 构建 过 程 中 很 容易 。 
只 需 找 到 : grunt .registerTash('build'，[ 所 在 行 ， 然 后 确保 将 ngTemplates 添 加 到 这 个 任务 
数组 的 concat 任 务 后 面 : 

grunt.registerTask('build', [ 

A Ge 


'concat', 


/7 si 








图 灵 社 区 会 员 鸟 月 月 (dearzpfree@hotmail.com) 专 享 尊重 版 权 





34.11 打包 模板 455 





'cssmin', 
"ngtemplates ' ， 
"uglify'， 
'rev', 
'uUsemin’ 


]); 
最 后 ， 还 需要 确保 在 app/index.html 中 引入 scripts/app.js 文 件 之 后 ， 引 入 这 个 templates.js 文 件 : 


《1-- builg.js({.tmp, app}) scripts/scripts.js -—-> 
“<script src="scripts/app.js">»> </script> 

《<script src="scripts/controllers/main.js"></script> 
《<script src="scripts/templates.js"></script> 

<!-—— engdbuild ——>» 


至 此 ， 当 构建 应 用 时 ， 模 板 文件 将 会 和 应 用 程序 的 其 他 部 分 一 起 打包 。 


注意 ,在 开发 应 用 程序 时 ， 如 果 在 缓存 中 没有 找到 模板 ， 它 会 自动 从 服务 器 加 载 ， 因 此 ， 如 
果 有 和 需要， 在 开发 的 过 程 中 可 以 安全 地 删除 app/scripts/template.js 文 件 。 


如 果 这 个 文件 已 经 存在 了 ,视图 会 使 用 缓存 的 文件 而 不 会 重新 加 载 ; 它 会 认为 有 可 用 的 模板 。 
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士 
总 结 








现在 你 已 经 掌握 了 相关 的 知识 和 实践 ， 可 以 熟练 地 使 用 Angular 构 建 强大 的 应 用 了 。 感 谢 你 
与 我 们 一 起 探索 这 个 框架 。AngularJS 社 区 非常 庞大 并 且 还 在 不 断 成 长 ， 让 我 们 一 起 促进 它 的 发 
展 壮 大 吧 ! 我 们 期 待 看 到 你 的 应 用 程序 。 
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